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

首先,我们在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"
      }
    ]
  }

保存。

效果图:

相关推荐
毕设源码-邱学长1 小时前
【开题答辩全过程】以 基于微信小程序的宠物领养系统为例,包含答辩的问题和答案
微信小程序·小程序·宠物
canglingyue2 小时前
微信小程序日历事件添加实现
微信小程序·小程序
毕设源码-邱学长6 小时前
【开题答辩全过程】以 基于微信小程序校园综合服务平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
Thetimezipsby6 小时前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
從南走到北6 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·开发语言·微信·微信小程序·小程序
猫七先生8 小时前
微信小程序一键登录可行性方案
前端·微信小程序
canglingyue9 小时前
微信小程序截屏与录屏功能详解
微信小程序·小程序
吴传逞1 天前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
服务端技术栈1 天前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!
前端·后端·微信小程序
宋辰月1 天前
微信小程序-day4
微信小程序·小程序