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

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

保存。

效果图:

相关推荐
牧杉-惊蛰2 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
拼图2097 小时前
微信小程序——skyline版本问题
微信小程序·小程序
mg6688 小时前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序
程序员陆通8 小时前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
MonkeyKing_sunyuhua10 小时前
微信小程序能不能获取物联网的上的设备数据
物联网·微信小程序·小程序
mg66811 小时前
微信小程序入门实例_____从零搭建你的第一个微信小程序
微信小程序·小程序
bilichen00611 小时前
微信小程序使用wx.chooseImage上传图片时进行压缩,并添加时间水印
微信小程序·小程序
皮皮灬虾12 小时前
微信小程序下单页—地址列表页—新增地址页 页面交互
微信小程序·小程序·交互
源码_V_saaskw10 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp
微信小程序·小程序·uni-app·微信公众平台
Q_Q196328847510 天前
python基于微信小程序的广西文化传承系统
开发语言·spring boot·python·微信小程序·django·flask