⾃定义导航栏的时候会定义⼀个tabbar的页⾯，如下：（需求不⼀样代码不⼀样，⼤致效果是⼀样的）
<view class="tabbar">
<view class="tabbar-item" @click="onChange(1)">
<image v-if="'pages/index/index' == curretnPage" src="../../static/btn_gc@2x.png"></image>
<image v-else src="../../static/btn_gc1@2x.png"></image>
<view :class="'pages/index/index' == curretnPage ? 'tabbar-item-active' : ''">⾸页</view>
</view>
<view class="tabbar-item" @click="onChange(2)">
<image v-if="'pages/recommend/recommend' == curretnPage" src="../../static/btn_tj@2x.png"></image>
<image v-else src="../../static/btn_tj1@2x.png"></image>
<view :class=" 'pages/recommend/recommend' == curretnPage ? 'tabbar-item-active' : ''">推荐</view>
</view>
<view class="tabbar-item" @click="onChange(3)" >
<image class="tabbar-item-img" src="../../static/btn_fb@2x.png"></image>
</view>
<view class="tabbar-item" @click="onChange(4)">
<image v-if="'pages/message/message' == curretnPage" src="../../static/btn_XX@2x.png"></image>
<image v-else src="../../static/btn_xx1@2x.png"></image>
<view :class=" 'pages/message/message' == curretnPage ? 'tabbar-item-active' : ''">消息</view>
</view>
<view class="tabbar-item" @click="onChange(5)">
<image v-if="'pages/center/center' == curretnPage" src="../../static/btn_wd@2x.png"></image>
<image v-else src="../../static/btn_wd1@2x.png"></image>
<view :class=" 'pages/center/center' == curretnPage ? 'tabbar-item-active' : ''">我的</view>
</view>
</view>
onChange(index){
if(index == 1){
wx.switchTab({
url:'../../pages/index/index'
})
}else if(index == 3){
this.$emit('releasePopup')
}else if(index == 2){
wx.switchTab({
url:'../../pages/recommend/recommend'
})
}else if(index == 5){
wx.switchTab({
url:'../../pages/center/center'
})
}else if(index == 4){
wx.switchTab({
url:'../../pages/message/message'
})
}
}
在pages.json中定义tabbar
"tabBar":{
"color": "#646D7E",
"selectedColor": "#4A8CF5",
"list":[
{
"pagePath": "pages/index/index",
"text": "⾸页",
"iconPath": "/static/btn_gc1@2x.png",
"selectedIconPath": "/static/btn_gc@2x.png",
"clas": "#646D7E",
"selectedColor": "#4A8CF5"
},
{
"pagePath": "pages/recommend/recommend",
但是你没有"text": "推荐",
"iconPath": "/static/btn_tj1@2x.png",
"selectedIconPath": "/static/btn_tj@2x.png",
"clas": "#646D7E",
"selectedColor": "#4A8CF5"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/static/btn_xx1@2x.png",
"selectedIconPath": "/static/btn_XX@2x.png",
"clas": "#646D7E",
"selectedColor": "#4A8CF5"
},
{
"pagePath": "pages/center/center",
"text": "我的",
"iconPath": "/static/btn_wd1@2x.png",
"selectedIconPath": "/static/btn_wd@2x.png",
"clas": "#646D7E",
"selectedColor": "#4A8CF5"
}
]
},
在app.js中
onShow: function() {
wx.hideTabBar()
},
如果不放⼼就在每个tabbar的页⾯的onshow⽅法中同样加上这⾏代码
这样就完美的解决了
这⾥⾯关键的就是跳转的页⾯的⽅式是switchTab，但是你没有在pages.json中定义Page.josn⾥定义tabbar时是不会跳转的，所以必须在page.json⾥定义tabbar，然后在app.js⾥将tabbar隐藏掉
在uniapp⾥⾯的时候也是⼀样的解决办法 就是把wx换成uni
发布评论