微信小程序tabBar怎么切换,实现页面的跳转?

效果图
在这里插入图片描述
如何实现?

"tabBar": {
    "selectedColor": "#d81e06",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-active.png"
    },{
      "pagePath": "pages/class/class",
      "text": "分类",
      "iconPath": "/images/fen.png",
      "selectedIconPath": "/images/fen-active.png"
    },{
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "/images/cart.png",
      "selectedIconPath": "/images/cart-active.png"
    },{
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "/images/my.png",
      "selectedIconPath": "/images/my-active.png"
    }
  ]

注意
每个页面的json文件都不能去掉navigationBarTitleText这个属性。否则会报错
各个属性的意思
tabBar 指底部的 导航配置属性

color 未选择时 底部导航文字的颜色

selectedColor 选择时 底部导航文字的颜色

borderStyle 底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)

list 导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text 导航图标下方文字

猜你喜欢

转载自blog.csdn.net/lqlq54321/article/details/106962069