这篇文章主要介绍“微信小程序自定义tabbar问题怎么解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序自定义tabbar问题怎么解决”文章能帮助大家解决问题。
计算
安全
数据库
网络和加速
企业服务
"tabBar": {
"custom": true,
"backgroundColor": "#FFFFFF",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "./images/home.png",
"selectedIconPath": "./images/home.png"
},
{
"pagePath": "pages/me/me",
"text": "个人中心",
"iconPath": "./images/me.png",
"selectedIconPath": "./images/me.png"
}
]
},
"usingComponents": {}划重点：根目录，请看下图，不放根目录会导致this.getTabBar = null
custom-tab-bar/index.js
Component({
data: {
selected: 0,
color: "#7A7E83",
selectedColor: "#3cc51f",
list: [{
pagePath: "../../pages/index/index",
iconPath: "../images/home.png",
selectedIconPath: "../images/home.png",
text: "首页"
}, {
pagePath: "../../pages/me/me",
iconPath: "../images/me.png",
selectedIconPath: "../images/me.png",
text: "个人中心"
}]
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({url})
this.setData({
selected: data.index
})
}
}
})custom-tab-bar/index.json
{
"component": true
}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" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view >{{item.text}}</cover-view>
</cover-view>
</cover-view>custom-tab-bar/index.wxss
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: white;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
background-color: rgba(0, 0, 0, 0.33);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-bar-item cover-image {
width: 27px;
height: 27px;
}
.tab-bar-item cover-view {
font-size: 10px;
}以首页举例：
pages/index.json
{
"usingComponents": {
"custom-tab-bar": "../../custom-tab-bar/index"
}
}pages/index.js
Page({
onShow: function () {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
})pages/index.wxml
<view class="container">
<custom-tab-bar></custom-tab-bar>
</view>关于“微信小程序自定义tabbar问题怎么解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
