微信小程序自定义Tabbar，附详细源码_小程序按键功能代码源码

作者：你好赵伟 | 2024-05-05 17:22:48

踩

小程序按键功能代码源码

1，前言

分享一个完整的微信小程序自定义Tabbar，tabbar按钮可以设置为跳转页面，也可以设置为功能按钮。懒得看文字的可以直接去底部，有GitHub地址。

2，说明

由于微信小程序自带的Tabbar功能比较单一，比如要做到中间是一个突出的圆形扫一扫按钮，就需要自定义Tabbar了。
中间是扫一扫

博主创建了一个Tabbar组件，自己写的样式，在需要用到的页面引入组件。
组件使用了position: fixed定位到底部，所以在用到组件的页面，需要给page加上margin-bottom样式。
交互是通过在组件上定义的bindtap事件，来进行跳转页面或者触发功能模块，其中路由跳转是用的wx.switchTab。事件以及传参可以通过triggerEvent；

3，核心代码

引用组件

//在页面json中
{
  "usingComponents": {
    "Tabbar":"../../components/tabbar/tabbar"
  }
}
//在wxml中
<Tabbar nowIndex="0" bind:switchDialog="switchDialog"/>
1
2
3
4
5
6
7
8

组件的data

data: {
  tabbarList:[
    {
      index:0,
      pagePath:'../index/index',
      title:"首页",
      icon: "../../images/home.png",
      onIcon: "../../images/home1.png",
      color: "#9B9B9B",
      onColor: "#19C29C",
    },
    {
      index:1,
      pagePath:'',
      icon: "../../images/look.png",
      onIcon: "../../images/look.png",
    },
    {
      index:2,
      pagePath:'../userCenter/userCenter',
      title:"个人中心",
      icon: "../../images/my.png",
      onIcon: "../../images/my1.png",
      color: "#9B9B9B",
      onColor: "#19C29C",
    }
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

组件的路由跳转

// 切换
changePage(e){
  let { path,index } = e.currentTarget.dataset;
  if(index === 1){
    this.chickLook();
    return false;
  };
  wx.switchTab({
    url: path
  });
}
1
2
3
4
5
6
7
8
9
10
11

源码GitHub地址：https://github.com/pdd11997110103/ComponentWarehouse

如果看了觉得有帮助的，我是@鹏多多i，欢迎点赞关注评论；
END

公众号

往期文章

个人主页

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/539992

微信小程序自定义Tabbar，附详细源码_小程序按键功能代码源码

目录

1，前言

2，说明

3，核心代码