微信小程序——自定義tabbar組件

項目github地址：https://github.com/zhongjunyao/comp-tabbar.git

核心代碼：

app.js

//app.js
App({
  onLaunch: function () {
  },
  globalData: {
    userInfo: null,
    tabbar: {
      color: "#A5A5A5",
      selectedColor: "#FFDC1D",
      backgroundColor: "#000000",
      borderStyle: "#000000",
      list: [
        {
          pagePath: "pages/index/index",
          iconPath: "/images/index.png",
          selectedIconPath: "/images/index_select.png",
          text: "首頁"
        },
        {
          pagePath: "pages/log/log",
          iconPath: "/images/shoucang.png",
          selectedIconPath: "/images/shoucang_select.png",
          text: "日誌"
        },
        {
          pagePath: "pages/my/my",
          iconPath: "/images/huiyuan.png",
          selectedIconPath: "/images/huiyuan_select.png",
          text: "我的"
        }
      ]
    }
  }
})

組件：tabbar

// tabbar.wxml

<view class="comp-tabbar" style="border-color:{{tabbar.borderStyle}};background-color:{{tabbar.backgroundColor}}">
  <view bindtap="redirectTo" data-taburl="{{item.pagePath}}" wx:for="{{tabbar.list}}" wx:key="index" class="tabbarItem" style="color:{{curRoute==item.pagePath?tabbar.selectedColor:tabbar.color}}">
    <image class="icon" src="{{curRoute==item.pagePath?item.selectedIconPath:item.iconPath}}" mode="aspectFit"></image>
    <view>{{item.text}}</view>
  </view>
</view>

// tabbar.wxss
.comp-tabbar{
  position:fixed;bottom:0;
  display:flex;
  align-items:center;
  width:100%;
  height:94rpx;
  box-sizing:border-box;
  border-top:1rpx solid;
  text-align:center;
  font-size:22rpx;
}
.comp-tabbar .tabbarItem{
  flex:1;height:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.comp-tabbar .tabbarItem .icon{
  width:50rpx;
  height:50rpx;
}

// tabbar.json
{
  "component":true
}

// tabbar.js
Component({

  data:{
    tabbar:{},
    curRoute:''
  },
  attached(){
    this.data.tabbar = getApp().globalData.tabbar;
    let pages = getCurrentPages();
    this.data.curRoute = pages[pages.length-1].route;
    this.setData(this.data)
  },
  methods:{
    redirectTo(e){
      let taburl = e.currentTarget.dataset.taburl;
      if(taburl == this.data.curRoute) return
      wx.redirectTo({
        url:"/"+taburl
      })
    },
  }
})