微信小程序自定義tabbar的實現

微信小程序自定義tabbar的實現

目的：當采用微信的自定義tabbar組件的時候，切換的時候會出現閃屏的效果；當使用微信默認的tabbar的時候，限制了tabbar的數量以及靈活配置。

方案：自己動手寫一個和微信小程序提供的tabbar相同的效果，而且還可以滿足靈活配置的功能.有參照有贊小程序

效果：

1. 效果A：

         

 

          2.效果B：

       

                  

 

 

 實現：

             項目結構如下:

              

       

            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，歡迎下載並使用！