解决小程序自定义tabbar栏切换闪屏的效果(uniapp自定义同样解决)
话不多说,直接上代码解决问题自定义导航栏的时候会定义一个tabbar的页面,如下:(需求不一样代码不一样,大致效果是一样的)<view class="tabbar"><view class="tabbar-item" @click="onChange(1)"><image v-if="'pages/index/index' == curretnPa...
·
话不多说,直接上代码解决问题
自定义导航栏的时候会定义一个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
更多推荐
已为社区贡献2条内容
所有评论(0)