微客导航 » 文章资讯 » 微信小程序自定义tabbar组件

微信小程序自定义tabbar组件

2023-07-04 06:15:03 288

本文实例为大家分享了微信小程序自定义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(){
varself=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'
})
}elseif(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('iPhoneX')>=0){
self.setData({
iPhoneX:true
})
}
}
})
},
/**
*组件的方法列表
*/
methods:{
switchTap:function(e){
varself=this
varindex=e.currentTarget.dataset.index;
varurls=self.data.urls
wx.switchTab({
url:urls[index],
})
}
}
})

index.wxml




首页

我的

index.wxss

._tabbar{
width:100%;
height:120rpx;
display:flex;
align-items:center;
background:#fff;
font-size:26rpx;
color:#999999;
box-shadow:0px-7rpx13rpx0pxrgba(193,185,204,0.13);
}

._tabbar.titem{
text-align:center;
width:50%;
}

._tabbar.titemimage{
display:block;
margin:auto;
width:48rpx;
height:48rpx;
margin-bottom:10rpx;
}

._tabbar.tCdk{
color:#37ADFE;
}

._iPhoneX{
height:148rpx;
}

index.json

{
"component":true,
"usingComponents":{}
}

以上为组件代码，点击tabbar跳转页面时，会重新加载tabbar组件，导致选中样式一直是默认的，因此需要在用到tabbar的页面的js文件中做如下操作：（以“首页” 页面为例）

onShow:function(){
this.getTabBar().setData({
_tabbat:0
})
},

以上就已经完成了，但是看网上大家说会出现两个tabBar,我这边是没出现（一个自定义，一个自带的），如果出现的话，在app.js中的onLaunch函数中加入wx.hideTabBar()，隐藏自带的tabbar就可以了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

微信小程序自定义tabbar组件

热门推荐

随机推荐