关于微信小程序的tarbar，相信你们都不会陌生 在实现小程序微信原装的tabbar却比较呆板，不够精致，往往不符合自己的要求
- 这个时候怎么办呢
这套方案接着！
先简单的来说一下主要思想:
自定义字体图标组件以及tabbar组件，在tabbar中引用自定义字体图标组件。
先说一下这套方案的优点：
- 图片换成字体,体积小,请求减少,性能提高
- 自己定义tabbar,能够从细节各方面达到自己的要求，精确到1像素
- 组件可以根据自己的条件来更换tabbar图标（比如你点进一个页面想把这个页面的tabbar样式自己更换） 总而言之就是自由性很大，精准性良好，能够去随心所欲的打造你的专属tabbar!
实现这套方案核心还是自定义组件
那就从这开始聊：
一个自定义组件由 json wxml wxss js 4个文件组成。
- 一个页面要引用一个组件时只需要在该页面的json配置下添加如下
{
//声明引用一个组件 配置好你的组件引用路径"usingComponents": {"icon": "../../components/icon/index"}
}
- 然后再页面上添加组件的标签即可。
//这样就能够在你的页面中添加组件
<icon type="" color="" size=""/>
如果对于组件的定义仍有疑惑的可以参考这份文档： 官方关于自定义组件的文档
OK 下面我们正式来讲这份方案：
- 先定义字体图标组件，在阿里图标库里面挑选好你所需要的字体选择下载代码。
这里我选择的是其中的_fontclass方案， - 把iconfont.css内的内容拷贝到你创建的icon目录下的index.wxss
{
//声明这一组文件设为自定义组件"component": true,"usingComponents": {}
}
- 在index.wxml中定义该组件的结构
<!-- 注意style里面的分号！ -->
<text class="iconfont icon-{{type}}" style="color:{{color}}; font-size:{{size}}rpx" ></text>
- 在js里面配置他的属性
//这里定义了3个自定义属性他们通过{{}}与wxml中的数据连接起来Component({properties: {type: {type: String,value: ''},color: {type: String,value: '#000000'},size: {type: Number,value: '45'}}
})
到此，字体图标组件搞定。
现在开始第二步，搞定tabbar组件。
- 首先做在json中添加配置
{"component": true,//声明对字体图标组件的引用"usingComponents": {"icon": "../../components/icon/index"}
}
- 写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>
- 再配置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"})}}}
})
- 配置样式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>
结果：
哇，看了半天就出这么一个小东西！
其实大道至简
掌握这套方案能够适配你需要的所有tabbar
他的颜色、大小、位置都可以自己掌控，重要的是这个解决方案。
最后强调一下里面的一些坑
- 按钮的样式层级z-index要提高
- 属性值与{{}}传输的把握
- style="color:{{color}}; font-size:{{size}}" 注意里面的;号
觉得不错的话可以点个赞鼓励一下哟
