微信小程序实现底部标签导航功能代码

1. 在app.json文件中配置底部标签栏的样式和页面路径

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icon/home.png",
      "selectedIconPath": "icon/home-active.png"
    }, {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "icon/cart.png",
      "selectedIconPath": "icon/cart-active.png"
    }, {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "icon/mine.png",
      "selectedIconPath": "icon/mine-active.png"
    }]
  }

2. 在app.js文件中实现底部标签栏的切换逻辑

App({
  onLaunch: function () {
    // ...
  },
  globalData: {
    // ...
  },
  // 监听底部标签栏的切换事件
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
})

3. 在页面中使用wx.switchTab方法实现页面的跳转

// 跳转到底部标签栏的某个页面
wx.switchTab({
  url: '/pages/index/index'
})