微信小程序自定义tabbar的实现

微信小程序自定义tabbar的实现

目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果;当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置。

方案:自己动手写一个和微信小程序提供的tabbar相同的效果,而且还可以满足灵活配置的功能.有参照有赞小程序

效果:

  1. 效果A:

         微信小程序自定义tabbar的实现

 

          2.效果B:

       

         微信小程序自定义tabbar的实现         

 

 

 实现:

             项目结构如下:

              微信小程序自定义tabbar的实现

       

            II 效果A实现:

 

                1》wxml的代码:

               
Page({
  data: {
    blockid:0,
    bgcolor:‘#ffffff‘,
    color:"#cccccc",
    selectedColor:‘#333333‘,
    showborder:false,
    bordercolor:"",
    tabbar:[
      {
        pagePath: "page/home0/index",
        selectedIconPath: ‘/resources/tabbar/homeh.png‘,
        iconPath: ‘/resources/tabbar/home.png‘,
        text: ‘首页A‘,
        isdot: false,
        number: 0
      }, {
        pagePath: "page/home1/index",
        selectedIconPath: ‘/resources/tabbar/kindh.png‘,
        iconPath: ‘/resources/tabbar/kind.png‘,
        text: ‘首页B‘,
        isdot: true,
        number: 0
      }, {
        pagePath: "page/home2/index",
        selectedIconPath: ‘/resources/tabbar/myh.png‘,
        iconPath: ‘/resources/tabbar/my.png‘,
        text: ‘首页C‘,
        isdot: false,
        number: 5
      }, {
        pagePath: "page/home3/index",
        selectedIconPath: ‘/resources/tabbar/shopcarth.png‘,
        iconPath: ‘/resources/tabbar/shopcart.png‘,
        text: ‘首页D‘,
        isdot: false,
        number: 0
      }
    ]
  },
  // event.detail 的值为当前选中项的索引
  tabbarChange(e) {
   
    var index = parseInt(e.detail);
    this.setData({
      blockid:index
    })
  }
})

          

          2》json文件如下:

        
{
  "usingComponents": {
    "tabbar": "../../components/tabbar/index"
  }
}

 

          3》js文件如下:
          
Page({
  data: {
    blockid:0,
    bgcolor:‘#ffffff‘,
    color:"#cccccc",
    selectedColor:‘#333333‘,
    showborder:false,
    bordercolor:"",
    tabbar:[
      {
        pagePath: "page/home0/index",
        selectedIconPath: ‘/resources/tabbar/homeh.png‘,
        iconPath: ‘/resources/tabbar/home.png‘,
        text: ‘首页A‘,
        isdot: false,
        number: 0
      }, {
        pagePath: "page/home1/index",
        selectedIconPath: ‘/resources/tabbar/kindh.png‘,
        iconPath: ‘/resources/tabbar/kind.png‘,
        text: ‘首页B‘,
        isdot: true,
        number: 0
      }, {
        pagePath: "page/home2/index",
        selectedIconPath: ‘/resources/tabbar/myh.png‘,
        iconPath: ‘/resources/tabbar/my.png‘,
        text: ‘首页C‘,
        isdot: false,
        number: 5
      }, {
        pagePath: "page/home3/index",
        selectedIconPath: ‘/resources/tabbar/shopcarth.png‘,
        iconPath: ‘/resources/tabbar/shopcart.png‘,
        text: ‘首页D‘,
        isdot: false,
        number: 0
      }
    ]
  },
  // event.detail 的值为当前选中项的索引
  tabbarChange(e) {
   
    var index = parseInt(e.detail);
    this.setData({
      blockid:index
    })
  }
})

 

 

        III效果B实现:

               1》wxml的代码:

<block wx:if="{{blockid==0}}">
  这里是首页A
</block>
<block wx:if="{{blockid==1}}">
  这里是首页B
</block>
<block wx:if="{{blockid==2}}">
  这里是首页C
</block>
<block wx:if="{{blockid==3}}">
  这里是首页D
</block>

<!--底部tabbar【一般正常用法,index页面特殊用法】-->
<tabbar tabbarData="{{tabbar}}" active="{{0}}" bgcolor="{{bgcolor}}" color="{{color}}" selectedColor="{{selectedColor}}"  showborder="{{showborder}}"  bind:tapChange="tabbarChange" />

         2》json的代码

   

{
  "usingComponents": {
    "tabbar": "../../components/tabbar/index"
  }
}

      3》js的代码

 

Page({

  /**
   * 页面的初始数据
   */
  data: {
    blockid: 0,
    bgcolor: ‘green‘,
    color: "red",
    selectedColor: ‘blue‘,
    showborder: false,
    bordercolor: "",
    tabbar: [{
      pagePath: "page/home0/index",
      selectedIconPath: ‘/resources/tabbar/homeh.png‘,
      iconPath: ‘/resources/tabbar/home.png‘,
      text: ‘首页A‘,
    }, {
      pagePath: "page/home1/index",
      selectedIconPath: ‘/resources/tabbar/kindh.png‘,
      iconPath: ‘/resources/tabbar/kind.png‘,
      text: ‘首页B‘,
    }, {
      pagePath: "page/home2/index",
      selectedIconPath: ‘/resources/tabbar/myh.png‘,
      iconPath: ‘/resources/tabbar/my.png‘,
      text: ‘首页C‘,
    }, {
      pagePath: "page/home3/index",
      selectedIconPath: ‘/resources/tabbar/shopcarth.png‘,
      iconPath: ‘/resources/tabbar/shopcart.png‘,
      text: ‘首页D‘,
    }]
  },
  // event.detail 的值为当前选中项的索引
  tabbarChange(e) {

    var index = parseInt(e.detail);
    this.setData({
      blockid: index
    })
  },
})

 

 

 

 

github地址如下:https://github.com/weiyunhelong/WeChatTabbar,欢迎下载并使用!

 

微信小程序自定义tabbar的实现

上一篇:发现一个企业微信的疑似BUG


下一篇:当微信小程序遇到AR(四)