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

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

保存。

效果图:

相关推荐
云起SAAS21 分钟前
ai公司起名取名抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·ai公司起名取名
黑马源码库miui5208622 分钟前
JAVA购物返利商品比价系统源码支持微信小程序
微信·微信小程序·小程序·1024程序员节
学会煎墙1 小时前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
赣州云智科技的技术铺子10 小时前
【一步步开发AI运动APP】十三、如何进行运动开始前的站位预检,提升用户体验
微信小程序·小程序·云开发·智能小程序
TiAmo zhang1 天前
微信小程序开发案例 | 简易登录小程序
微信小程序·小程序·1024程序员节
黑马源码库miui520861 天前
场馆预定系统小程序
微信·微信小程序·小程序·1024程序员节
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生2 天前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
從南走到北2 天前
JAVA无人自助共享系统台球室源码自助开台约球交友系统源码小程序
java·微信·微信小程序·小程序·1024程序员节