小程序tabbar这套方案全搞定！

关于微信小程序的tarbar，相信你们都不会陌生 在实现小程序微信原装的tabbar却比较呆板，不够精致，往往不符合自己的要求

• 这个时候怎么办呢

  这套方案接着！

先说一下这套方案的优点：

1. 图片换成字体,体积小,请求减少,性能提高
2. 自己定义tabbar,能够从细节各方面达到自己的要求，精确到1像素
3. 组件可以根据自己的条件来更换tabbar图标（比如你点进一个页面想把这个页面的tabbar样式自己更换） 总而言之就是自由性很大，精准性良好，能够去随心所欲的打造你的专属tabbar!

实现这套方案核心还是自定义组件

那就从这开始聊：

一个自定义组件由 json wxml wxss js 4个文件组成。

• 一个页面要引用一个组件时只需要在该页面的json配置下添加如下

{
//声明引用一个组件 配置好你的组件引用路径
  "usingComponents": {
    "icon": "../../components/icon/index"
  }
}
复制代码

• 然后再页面上添加组件的标签即可。

//这样就能够在你的页面中添加组件
<icon type="" color="" size=""/>
复制代码

如果对于组件的定义仍有疑惑的可以参考这份文档： 官方关于自定义组件的文档

OK 下面我们正式来讲这份方案：

1. 先定义字体图标组件，在阿里图标库里面挑选好你所需要的字体选择下载代码。
   这里我选择的是其中的_fontclass方案，
2. 把iconfont.css内的内容拷贝到你创建的icon目录下的index.wxss

3. 将该目录下index.json添加

{  
//声明这一组文件设为自定义组件
  "component": true,
  "usingComponents": {}
}
复制代码

4. 在index.wxml中定义该组件的结构

<!-- 注意style里面的分号！ -->
<text class="iconfont icon-{{type}}" style="color:{{color}}; font-size:{{size}}rpx" ></text>
复制代码

5. 在js里面配置他的属性

//这里定义了3个自定义属性他们通过{{}}与wxml中的数据连接起来
 Component({
  properties: {
    type: {
      type: String,
      value: ''
    },
    color: {
      type: String,
      value: '#000000'
    },
    size: {
      type: Number,
      value: '45'
    }
  }
})
复制代码

到此，字体图标组件搞定。

现在开始第二步，搞定tabbar组件。

1. 首先做在json中添加配置

{
  "component": true,
  //声明对字体图标组件的引用
  "usingComponents": {
    "icon": "../../components/icon/index"
  }
}
复制代码

2. 写wxml结构

<view class="weibo-tabbar" >
//绑定回首页事件，此处的data-hi中的数据是为了传递到e.currentTarget.dataset.hi
//通过这个数据我们可以用来判断是否处于首页，然后在js中配置可以阻扰原地跳转
    <view class="item-left"  bindtap="goHome" data-hi="{{isIndex}}">
            <icon type="shouye" color="{{isIndex?'#000000':'#b1b1b1'}}" size="45"/>
            <text class="1" style="color:{{isIndex?'#000000':'#b1b1b1'}}">首页</text>
    </view>
    <block wx:if="{{isInner}}">
        <view class="item-right" style="color:#b1b1b1" bindtap="goShare">
        <icon type="fenxiang" color="gray" size="45"/>
            <text class="2">分享</text>
        </view>
    </block>
    <block wx:else>
        <view class="item-right"  bindtap="goInfo" data-hi="{{isIndex}}">
        <icon type="wode" color="{{isIndex?'#b1b1b1':'#000000'}}" size="45"/>
            <text class="2" style="color:{{isIndex?'#b1b1b1':'#000000'}}">我的</text>
        </view>
    </block>
</view>
复制代码

3. 再配置js属性及方法

const app = getApp();
Component({
  properties: {
    isIndex: { // 是否主页            
      type: Boolean,
      value: false,
    },
    isInner: { //是否内部页面
      type: Boolean,
      value: false,
    },
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    goHome: (e) => {
      // 判断是否为主页面防止原地跳转
      if(!e.currentTarget.dataset.hi){
        wx.redirectTo({
          url: "/pages/index/index"
        })
      }
    },
    goShare: function () {
    },
    goInfo: (e) => {
        if(e.currentTarget.dataset.hi){
        wx.redirectTo({
          url: "/pages/info/info"
        })
      }
    }
  }
})
复制代码

4. 配置样式wxss

.weibo-tabbar {
    bottom: 0;
    height: 97rpx;
    padding: 12rpx 0rpx;
    display: flex;
    width: 100%;
    position: fixed;
    background: #ffffff;
    box-sizing: border-box;
}
//产生优雅的0.5px边框
.weibo-tabbar::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: 0;
    left: 0;
    border-top: 1rpx solid rgba(177, 177, 177, 0.4);
    transform: scale(0.5);
    transform-origin: 0 0;
  }
  //这里用flex布局，移动端flex布局确实很爽
  .weibo-tabbar .item-left, .item-right{
   //这里有一处坑，若不不设置他的层级变大的话
   //你是点不到这个item按钮的，当然也不会产生触碰事件
    z-index: 999;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 20rpx;
    color: #b1b1b1;
}
.shouye, .wode {
    height: 45rpx;
    width: 45rpx;
}
复制代码

到此你只需要在你的页面优雅的添加一行，就能在你的页面中产生tabbar

//此处isIndex是给组件的属性传输值，别属性不添加即为默认属性值
<tabbar isIndex="true"></tabbar>
复制代码

结果：

最后强调一下里面的一些坑

1. 按钮的样式层级z-index要提高
2. 属性值与{{}}传输的把握
3. style="color:{{color}}; font-size:{{size}}" 注意里面的;号