微信小程序学习之底部导航栏

首先,我们在app.json中添加4个页面,

复制代码
"pages": [
    "pages/index/index",
    "pages/category/category",
    "pages/cart/cart",
    "pages/user/user"
  ],

其次我们把8张图片放到imaes文件夹下,

图标可以去https://www.iconfont.cn/下载

然后添加tabBar项(已经加上注释):

复制代码
"tabBar": {
    // 文字的颜色
    "color": "#666",
    // 选中项文字颜色
    "selectedColor": "#fa2c19",
    // 导航的栏目
    "list":[
      {
        // 导航页面的地址
        "pagePath": "pages/index/index",
        // 导航项的说明文字
        "text": "首页",
        // 导航项的默认图片
        "iconPath": "./images/shouye.png",
        // 导航项的选中图片
        "selectedIconPath": "./images/shouye_select.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "类别",
        "iconPath": "./images/leibie.png",
        "selectedIconPath": "./images/leibie_select.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "./images/gouwuche.png",
        "selectedIconPath": "./images/gouwuche_select.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "用户",
        "iconPath": "./images/yonghu.png",
        "selectedIconPath":"./images/yonghu_select.png"
      }
    ]
  }

保存。

效果图:

相关推荐
Bruce_Json1 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
来碗盐焗星球3 小时前
记一次微信小程序AI开发的血泪史
前端·微信小程序
The_era_achievs_hero14 小时前
微信小程序71~80
微信小程序·小程序
dssxyz15 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
澄江静如练_20 小时前
微信小程序发体验版
微信小程序·小程序
流口水的兔子1 天前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记1 天前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
The_era_achievs_hero1 天前
微信小程序61~70
微信小程序·小程序
编程猪猪侠1 天前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu2 天前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序