这里写目录标题
自定义tabar说明
比如我们想定义这样的tabbar原生就无法为我们满足,
原生tabbar配置
微信小程序有对应的tabbar定制只需要在app.json文件配置即可。
"tabBar": {
"custom": true,
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/user/user",
"iconPath": "./assimg/hd.png",
"selectedIconPath": "./assimg/hds.png",
"text": "活动"
},
{
"pagePath": "pages/index/index",
"iconPath": "./assimg/dh.png",
"selectedIconPath": "./assimg/hds.png",
"text": "导航"
},
{
"pagePath": "pages/navigator/navigator",
"iconPath": "./assimg/md.png",
"selectedIconPath": "./assimg/hds.png",
"text": "我的"
}
]
},
自定义tabar
1.新建custom-tab-bar文件夹
*必须先在json设置"custom": true,才能自定义我们的tabbar
//我们编辑js代码
Component({
data: {
selected: 0,
color: "#7A7E83",
selectedColor: "#3cc51f",
"list": [{
"pagePath": "/pages/index/index",
"iconPath": "../assimg/hd.png",
"selectedIconPath": "../assimg/hds.png",
"text": "活动"
},
{
"pagePath": "/pages/navigator/navigator",
"iconPath": "../assimg/dh.png",
"selectedIconPath": "../assimg/dhs.png",
"text": "导航",
"diyClass": "diy"
},
{
"pagePath": "/pages/user/user",
"iconPath": "../assimg/md.png",
"selectedIconPath": "../assimg/mds.png",
"text": "我的"
}
]
},
attached() {},
onShow: function () {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
this.setData({
selected: data.index
})
wx.switchTab({
url
})
}
},
})
//wxhtml页面代码
<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
<!-- <cover-view class="tab-bar-border"></cover-view> -->
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.diyClass}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" class="{{item.diyClass}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}}" class="{{item.diyClass}}">{{item.text}}</cover-view>
</cover-view>
</cover-view>
由于自定义的tabbar效果很强但是也带来了很多问题比如切换空白等等,亲们在自定义的时候如果不是真的需求需要尽量使用原生定义的