小程序自定义tabbar到任意页面

最新推荐文章于 2025-03-12 16:46:12 发布

灵性成长

最新推荐文章于 2025-03-12 16:46:12 发布

阅读量1.4k

点赞数 1

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/x_Yanger/article/details/102958918

版权

小程序专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在非tabbar页面实现自定义tabbar。首先，通过小程序官方文档下载tabbar资源并导入项目；其次，在目标页面的json配置中引入weui；接着，在wxml中插入相关代码；最后，在js文件中定义tabbar的list数据，从而完成自定义tabbar的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多时候不是tabbar的页面也需要加上tabbar导航所以我们需要去自定义它～
（1）打开小程序官方文档
在这里插入图片描述
按照图片中的箭头找到按需下载选择里面的tabbar下载下来放入我们小程序的项目中
（2）在需要自定义tabbar的页面json中引入我们下载好的weui

{
  "usingComponents": {
    "mp-tabbar": "../../weui/tabbar/tabbar"
  }
}

（3）在wxml中引入

<mp-tabbar style="position:fixed;bottom:0;width:100%;left:0;right:0;" list="{{list}}" bindchange="handelChange"></mp-tabbar>

（4）在js中定义一个list字段

 
    data:{
    /*list的内容就是app.json中tabBar中list的内容*/
		list: [
      {
        "pagePath": "",
        "text": "",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "pagePath": "",
        "text": "",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "pagePath": "",
        "text": "",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "pagePath": "",
        "text": "",
        "iconPath": "",
        "selectedIconPath": ""
      }
    ]
}
/*点击tabbar时跳转页面*/
  handelChange(e) {
    console.log('tab change', e)
    wx.switchTab({
      url: e.detail.item.pagePath,
    })
  },

这样就可以啦！