本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下
先看一看目录
template文件夹里存放tabbar模板。
template/template.wxml
{ {item.text}}
template.css
.icon{
width:54rpx;
height: 54rpx;
}
.tabBar{
width:100%;
position: fixed;
bottom:0;
padding:10rpx;
margin-left:-4rpx;
background:#F7F7FA;
font-size:20rpx;
color:#8A8A8A;
box-shadow: 6rpx 6rpx 6rpx 6rpx #aaa;
}
.tabBar-item{
float:left;
width:25%;
text-align: center;
overflow: hidden;
}
/*当前字体颜色*/
.tabBartext{
color:red;
}
template.js
//