微信小程序--自定义tabbar

微信小程序自带的tabbar虽然可以满足大多数小程序开发的要求,但一些特殊要求的小程序,比如只包含文字的tabbar,或者只包含图片的tabbar等特殊设计就需要自定义.
先上几张效果图:

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:''}}">
  <!--首页-->
  <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>

在改文件中,可以通过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: {}
    }
  },

  /**
   * 组件的初始数据
   */
  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)后,需要建立一个index文件,来组合tabbar和相应的页面,为什么用组合的方式呢,是为了页面的切换效果,如果采用wx.navigateTo到对应页面,页面的切换效果会闪,没那么理想
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>

通过条件判断显示所需要的页面

最重要的一点就是index.js文件了

Page({
  data: {
    choose_index: 0,
    tabbar: {
      "color": "##B1B1B1",
      "selectedColor": "#ffffff",
      "borderStyle": "#dcdcdc",
      "backgroundColor": "#19191C",
      "list": [{
          "key": "home",
          "text": "首页"
        },
        {
          "key": "tag",
          "text": "关注"
        },
        {
          "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: '关注',
        })
      }else if(index == 3){
        wx.setNavigationBarTitle({
          title: '消息',
        })
      }else {
        wx.setNavigationBarTitle({
          title: '我的',
        })
      }
    }
  }
})

tabbar就是数据源了,配置好对应item的属性即可,如果需要icon+文字,则需要添加selectedIconPath和iconPath的属性就好了,至此基本就可以完成自定义的tabbar了

文章思路,参考了网络大神的想法,加以少许修改才得以满足自己项目需要,如有侵权,请留言告知.