微信小程序自帶的tabbar雖然可以滿足大多數(shù)小程序開發(fā)的要求,但一些特殊要求的小程序,比如只包含文字的tabbar,或者只包含圖片的tabbar等特殊設(shè)計(jì)就需要自定義.
先上幾張效果圖:

image.png

image.png

tabbar.wxml文件

<view class="c_tabbar"
  style="color:{{data.color?data.color:''}};border-color: {{data.borderStyle?data.borderStyle:''}};background-color:{{data.backgroundColor?data.backgroundColor:''}}">
  <!--首頁(yè)-->
  <view wx:for="{{ data.list }}" wx:for-item="item" wx:for-index="idx" wx:key="key" class="tabbar_item {{item.iconType=='big' ? 'big_icon':''}} {{item.iconType =='overflow' ? 'big_icon overflow':''}}" data-index="{{idx}}" bindtap="change">
    <image wx:if='{{item.selectedIconPath || item.iconPath}}' class="tabbar_item_img {{item.iconType? item.iconType:''}}" src="{{index == idx && !item.iconType? item.selectedIconPath : item.iconPath}}"></image>
    <text wx:if="{{item.text && !item.iconType}}" class="tabbar_item_title {{index == idx ? 'selected' : ''}}"
    style="color:{{index == idx && data.selectedColor?data.selectedColor:''}}">{{item.text}}</text>
  </view>
</view>

在改文件中,可以通過(guò)wx:if條件控制item是顯示icon還是文字,或者icon+文字的組合,自由定義.

tabbar.wxss文件

.c_tabbar {
  bottom: 0;
  position: fixed;
  height: 50px;
  border-top: 1px solid #dcdcdc;  
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  color: #999;
  background-color: #fff;
  padding: 0;
}

.c_tabbar .tabbar_item {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c_tabbar .tabbar_item .tabbar_item_img {
  width: 25px;
  height: 25px;
}

.c_tabbar .tabbar_item .tabbar_item_title.selected {
  color: #78d;
}

/* big icon */
.c_tabbar .tabbar_item_img.big {
  width: 25px;
  height: 25px;
}

.c_tabbar  .tabbar_item_img.overflow {
  position: fixed;
  bottom: 25rpx;
}

.c_tabbar .tabbar_item_img.shadow {
  -moz-box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.5);
}

.c_tabbar .tabbar_item_img.circle {
  border-radius: 50%;
}

page {
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  overflow-x: hidden;
  margin: 0 0 95rpx 0;
  padding: 0;
}

順便給出tabbar.js文件

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    data: {
      type: Object,
      value: {}
    }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    index: 0
  },

  /**
   * 組件的方法列表
   */
  methods: {
    change: function(e) {
      var index = e.currentTarget.dataset.index * 1
      var item = this.data.data.list[index]
      var choose = item.choose
      
      if (choose != 'disable') {
        this.setData({
          index: index
        })
      }

      this.triggerEvent('change', {
        key: item.key,
        index: index
      })
    }
  }
})

建好componet文件(tabbar)后,需要建立一個(gè)index文件,來(lái)組合tabbar和相應(yīng)的頁(yè)面,為什么用組合的方式呢,是為了頁(yè)面的切換效果,如果采用wx.navigateTo到對(duì)應(yīng)頁(yè)面,頁(yè)面的切換效果會(huì)閃,沒那么理想
index.wxml文件

<home wx:if="{{choose_index==0}}"></home>
<tag wx:if="{{choose_index==1}}"></tag>
<notebook wx:if="{{choose_index==3}}"></notebook>
<me wx:if="{{choose_index==4}}"></me>

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

通過(guò)條件判斷顯示所需要的頁(yè)面

最重要的一點(diǎn)就是index.js文件了

Page({
  data: {
    choose_index: 0,
    tabbar: {
      "color": "##B1B1B1",
      "selectedColor": "#ffffff",
      "borderStyle": "#dcdcdc",
      "backgroundColor": "#19191C",
      "list": [{
          "key": "home",
          "text": "首頁(yè)"
        },
        {
          "key": "tag",
          "text": "關(guān)注"
        },
        {
          "key": "new",
          "iconPath": "/images/new.png",
          "iconType": "big overflow circle shadow",
          "choose": "disable"
        },
        {
          "key": "notebook",
          "text": "消息"
        },
        {
          "key": "me",
          "text": "我的"
        }
      ]
    }
  },
  onLoad:function(){
    wx.setNavigationBarTitle({
      title: '推薦',
    })
  },
  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/index',
      })
    } else {
      this.setData({
        choose_index: e.detail.index
      })
      var title = ''
      var index = e.detail.index
      if(index == 0){
        wx.setNavigationBarTitle({
          title: '推薦',
        })
      }else if(index == 1){
        wx.setNavigationBarTitle({
          title: '關(guān)注',
        })
      }else if(index == 3){
        wx.setNavigationBarTitle({
          title: '消息',
        })
      }else {
        wx.setNavigationBarTitle({
          title: '我的',
        })
      }
    }
  }
})

tabbar就是數(shù)據(jù)源了,配置好對(duì)應(yīng)item的屬性即可,如果需要icon+文字,則需要添加selectedIconPath和iconPath的屬性就好了,至此基本就可以完成自定義的tabbar了

文章思路,參考了網(wǎng)絡(luò)大神的想法,加以少許修改才得以滿足自己項(xiàng)目需要,如有侵權(quán),請(qǐng)留言告知.