小程序 自定义tabbar

        小程序用的人变得多了，然后原先的底部tabbar不满足大家的需求，有的嫌弃图片或者字体太大，或者添加一些别的需求，今天给大家带来自定义tabbar。

        在我看来微信想要做到自定义tabbar有很多办法，比如一（例如有三个界面）将三个界面都放在一个界面里，然后底部自己写个tabbar布局，点击的时候选择显示隐藏某个界面（网上可以搜到这种方法）；比如二（例如有三个界面）先编写原生的tabbar，然后隐藏tabbar，再每个界面都引入自定义一个底部tabbar；或许还有其它简单的方法，但是我目前就想到这两种。

        本文带来的第二种方法，先看一下效果。

      效果大概就是这样子，项目结构很简单。就是一个自定义tabbar组件，三个界面。如图：

     就是先写一个原生的系统的tabbar，然后在第一个页面隐藏掉，然后咱们自定义的tabbar点击的时候也可以使用wx.switchTap了，因为使用wx.navigateTo或者wx.redirectTo()会让界面看的像是跳转一样。

      先讲一下这个自定义tabbar：

     tabbar.wxml:

<!--pages/com/conpant.wxml-->
<view class="nav-tabs">
  <view class="tab-list {{currentTab == idx ? 'active' : 'default' }}" wx:for="{{items}}" wx:key="prototype" wx:for-index="idx" wx:for-item="item" data-current="{{idx}}" bindtap="swichNav">
    <block wx:if="{{idx == 0}}">
    <view class="tips" hidden='{{mainUnReadNum == 0}}'>{{mainUnReadNum}}</view>
    </block>
    <block wx:if="{{idx == 1}}">
    <view class="tips" hidden='{{carUnReadNum == 0}}'>{{carUnReadNum}}</view>
    </block>
    <block wx:if="{{idx == 2}}">
    <view class="tips" hidden='{{meUnReadNum == 0}}'>{{meUnReadNum}}</view>
    </block>
    <!-- <view class="tips">{{item.unReadNum}}</view> -->
    <text class="tab-text" wx:for-index="idx" data-current="{{idx}}" style='color:{{currentTab == idx ? item.selectedColor : item.defaultolor }}' >{{item.text}}</text>
    <image class="iconPath" wx:for-index="idx" data-current="{{idx}}" src="{{currentTab == idx ? item.selectedIconPath : item.iconPath }}"></image>
  </view>
</view>

我在组件暴露了三个未读数mainUnReadNum、carUnReadNum和meUnReadNum使用组件的时候可以直接传进来显示小红点数量，当然如果你不想这样用的话可以把那段block注释掉，在列表定义一个unReadNum然后直接读出来就行。

tabbar.wxss:

/* pages/com/conpant.wxss */
.nav-tabs {
  background: #fff;
  display: flex;
  position: fixed;
  z-index: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  justify-content: space-around;
  border-top: 1rpx #d8d8d8 solid;
  height: 110rpx;
}

.tab-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  background: #fcfcfc;
  /* height: 120rpx; */
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  position: relative;
}

.tab-text {
  font-size: 28rpx;
  color: #5f5f5f;
}

.iconPath {
  width: 50rpx;
  height: 50rpx;
}

.tips {
  position: absolute;
  font-size: 26rpx;
  text-align: center;
  background: #f43530;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.75em;
  right: -1.70em;
  top: 0.5em;
  color: #fff;
}

这个没啥好说的就是样式，注意一点就是这个高度是110rpx;如果遮挡列表，你就给列表设置一个margin-bottom:110rpx就行

tabbar.json:

{
  "component": true,
  "usingComponents": {}
}

tabbar.js:

// pages/com/conpant.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    currentTab : {
      type : String,
      value : 0,
    },
    mainUnReadNum: {
      type: String,
      value: 0,
    },
    carUnReadNum: {
      type: String,
      value: 0,
    }, 
    meUnReadNum: {
      type: String,
      value: 0,
    },
    items : {
      type : Array,
      value:  [
        {
          "iconPath": "../../images/index2.png",
          "selectedIconPath": "../../images/index1.png",
          "defaultColor": '#646464',
          "selectedColor": "#1296DB",
          // "unReadNum" : 11,
          "text": "首页"
        },
        {
          "iconPath": "../../images/car2.png",
          "selectedIconPath": "../../images/car1.png",
          "defaultColor": '#646464',
          "selectedColor": "#1296DB",
          // "unReadNum": 4,
          "text": "购物车"
        },
        {
          "iconPath": "../../images/my2.png",
          "selectedIconPath": "../../images/my1.png",
          "defaultColor": '#646464',
          "selectedColor": "#1296DB",
          // "unReadNum": 0,
          "text": "我的"
        }
      ],
    }
  },

  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {
    swichNav(e){
      var idx = e.currentTarget.dataset.current;
      var myEventDetail = {
        idx : idx,
      }
      this.triggerEvent('bindClickTap', myEventDetail);
    }
    
  }
})

定义了当前第几项currentTab，以及三个未读数，还有列表，如果列表想传入的话可以根据这个items ，然后暴露了个bindClickTap方法传入当前选的第几项idx，以便做跳转或者其他操作。

使用的时候appjson先写个原生的tabbar到时候隐藏：

appjson:

"tabBar": {
    "color": "#323232",
    "selectedColor": "#2CB0E0",
    "borderStyle": "#dddddd",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/main/index",
        "iconPath": "images/index2.png",
        "selectedIconPath": "images/index1.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/car/index",
        "iconPath": "images/car2.png",
        "selectedIconPath": "images/car1.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/me/index",
        "iconPath": "images/my2.png",
        "selectedIconPath": "images/my1.png",
        "text": "我的"
      }
    ]
  }

使用的话很简单，把tabbar这个组件先复制进去，然后使用就行，以main/index为例：

index.wxml:

<!--pages/main/index.wxml-->
<text>首页</text>
<tabbar bind:bindClickTap="swichNav" mainUnReadNum="10" carUnReadNum="2" currentTab="0" ></tabbar>

传入这个组件就行，如果想自己传入列表可以加个item="{{array}}"，记住currentTab值每一页都要加一，比如car里面currentTab="1";bindClickTap是选择处理的方法。

index.json:

{
  "usingComponents": {
    "tabbar": "../component/tabbar"
  }
}

引入这个组件就好名字叫tabbar。

index.wxss里面没东西

index.js:

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.hideTabBar({
      aniamtion : true
    })
  },

swichNav: function (e) {
    let that = this;
    var idx = e.detail.idx;
    if (this.data.currentTab === idx) {
      return false;
    } else {
      if (idx == 0){
        wx.switchTab({
          url: '../main/index',
        })
      }else if(idx === 1){
        wx.switchTab({
          url: '../car/index',
        })
      }else{
        wx.switchTab({
          url: '../me/index',
        })
      }
    }
  },

 隐藏一下系统的底部tabbar。就对点击事件做下判断就好。

使用起来很简单，不用做什么事情。初学小程序，有什么不对的地方请提出。欢迎讨论QQ:1398169857。

链接：https://pan.baidu.com/s/1Qin5OFqf_aZ6mIKsaFtdow
提取码：knse