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