本文实例为大家分享了微信小程序自定义tabbar组件的具体代码，供大家参考，具体内容如下
由于项目需求，必须自己写组件：
第一步： 在App.json中配置tabBar,自定也组件也必须配置，"custom": true,list里配置所有的tabbar页面。
"tabBar": {
"custom": true,
"color": "red",
"selectedColor": "#3b81d7",
"backgroundColor": "#000000",
"list": [{
"pagePath": "pages/Role/InsureIndex/index",
"text": "首页"
}, {
"pagePath": "pages/Role/MineIndex/index",
"text": "首页"
}, {
"pagePath": "pages/index/userInfo/userInfo",
"text": "我的"
}]
},
第二步： 在pages的同级目录新建组件，文件夹名字：custom-tab-bar，自定义组件文件名为index。组件代码如下，应该都能看懂。
index.js
Component({
properties: {},
data: {
indexImg: "static/images/tabBar/tab_icon_home_nor@2x.png" ,
indexSelectImg: "static/images/tabBar/tab_icon_home_sel@2x.png" ,
aboutUsImg: "static/images/tabBar/tab_icon_user_nor@2x.png" ,
aboutUsSelectImg: "static/images/tabBar/tab_icon_user_sel@2x.png" ,
_tabbat: null ,
iPhoneX: false ,
urls: [ '/pages/Role/InsureIndex/index' ,
'/pages/index/userInfo/userInfo'
]
},
attached() {
var self = this
//此为业务代码，可不看
wx.getStorage({
key: 'userInfo' ,
success: function (res) {
const {
userRoleCode
} = res.data
if (userRoleCode == '50' || userRoleCode == '70' ) {
self.setData({
[ "urls[0]" ]: '/pages/Role/MineIndex/index'
})
} else if (userRoleCode == '30' || userRoleCode == '35' || userRoleCode == '40' ) {
self.setData({
[ "urls[0]" ]: '/pages/Role/InsureIndex/index'
})
}
}
})
wx.getSystemInfo({
success(res) {
console.log(res.model)
if (res.model.indexOf( 'iPhone X' ) >= 0) {
self.setData({
iPhoneX: true
})
}
}
})
},
/**
* 组件的方法列表
*/
methods: {
switchTap: function (e) {
var self = this
var index = e.currentTarget.dataset.index;
var urls = self.data.urls
wx.switchTab({
url: urls[index],
})
}
}
})
index.wxml
< div class = "_tabbar {{iPhoneX?'_iPhoneX':''}}" >
< div class = "titem {{_tabbat==0?'tCdk':''}}" data-index = "0" bind:tap = "switchTap" >
< image src = "{{_tabbat==0?indexSelectImg:indexImg}}" />
< b >首页</ b >
</ div >
< div class = "titem {{_tabbat==1?'tCdk':''}}" data-index = "1" bind:tap = "switchTap" >
< image src = "{{_tabbat==1?aboutUsSelectImg:aboutUsImg}}" />
< b >我的</ b >
</ div >
</ div >
index.wxss
._tabbar {
width : 100% ;
height : 120 rpx;
display : flex;
align-items: center ;
background : #fff ;
font-size : 26 rpx;
color : #999999 ;
box-shadow: 0px -7 rpx 13 rpx 0px rgba( 193 , 185 , 204 , 0.13 );
}
._tabbar .titem {
text-align : center ;
width : 50% ;
}
._tabbar .titem image {
display : block ;
margin : auto ;
width : 48 rpx;
height : 48 rpx;
margin-bottom : 10 rpx;
}
._tabbar .tCdk {
color : #37ADFE ;
}
._iPhoneX {
height : 148 rpx;
}
index.json
{
"component" : true ,
"usingComponents" : {}
}
以上为组件代码，点击tabbar跳转页面时，会重新加载tabbar组件，导致选中样式一直是默认的，因此需要在用到tabbar的页面的js文件中做如下操作：（以 [首页] 页面为例）
onShow: function () {
this .getTabBar().setData({
_tabbat: 0
})
},
以上就已经完成了，但是看网上大家说会出现两个tabBar,我这边是没出现（一个自定义，一个自带的），如果出现的话，在app.js中的onLaunch函数中加入 wx.hideTabBar() ， 隐藏自带的tabbar就可以了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_38045993/article/details/114702411
查看更多关于微信小程序自定义tabbar组件的详细内容...