1，前言

分享一个完整的微信小程序自定义Tabber，tabber按钮可以设置为跳转页面，也可以设置为功能按钮。懒得看文字的可以直接去底部，博主分享了小程序代码片段和GitHub地址。

2，说明

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

微信小程序自定义Tabber，附详细源码

博主创建了一个Tabber组件，自己写的样式，在需要用到的页面引入组件。

组件使用了position: fixed定位到底部，所以在用到组件的页面，需要给page加上margin-bottom样式。

交互是通过在组件上定义的bindtap事件，来进行跳转页面或者触发功能模块，其中路由跳转是用的wx.switchTab。事件以及传参可以通过triggerEvent；

3，核心代码

文件目录

微信小程序自定义Tabber，附详细源码

引用组件

//在页面json中

{

  "usingComponents": {

    "Tabber":"../../components/tabber/tabber"

  }

}

//在wxml中

<Tabber nowIndex="0" bind:switchDialog="switchDialog"/>

组件的data

data: {

  tabberList:[

    {

      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",

    }

  ],

}

组件的路由跳转

// 切换

changePage(e){

  let { path,index } = e.currentTarget.dataset;

  if(index === 1){

    this.chickLook();

    return false;

  };

  wx.switchTab({

    url: path

  });

}

小程序代码片段

GitHub源码

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

END

微信小程序自定义Tabber，附详细源码

往期文章

个人主页

秒客网

微信小程序自定义Tabber，附详细源码

1，前言

2，说明

3，核心代码

相关文章