双角色tabbar底部导航栏,在首页进入,都是正常,在角色中我的页面设定了“去社区”或者“去论坛”两个切换按钮,当点击这个按钮时,切换成功,但是在点击tabbar中的按钮时,多点几次,在论坛角色的时候,就切换到了社区的角色,又或者论坛角色和社区角色来回切换,尤其在点击“我的”按钮时,这个问题是什么问题,怎么解决?
担心有些时候,代码片段打不开,复制部分代码如下:
首页index-wxml代码:
<view class="title">
<view class="jobs-group">
<image class="jobs-img" src="../../images/jobs.jpeg"></image>
<button class="jobs" bindtap="goto" data-type="0">论坛</button>
</view>
<view class="separate"></view>
<view class="jobs-group">
<image class="jobs-img" src="../../images/enterprise.jpg"></image>
<button class="jobs" bindtap="goto" data-type="1">社区</button>
</view>
</view>
js代码:
Page({
goto(e){
console.log(e);
let type = e.currentTarget.dataset.type;
//把权限存储到缓存当中
wx.setStorageSync('user',type);
if(type == "0"){
wx.switchTab({
url:'../jobs/index/index'
})
}else{
wx.switchTab({
url:'../enterprise/index/index'
})
}
},
})
<!--custom-tab-bar/index.wxml-->
<view class="tab-bar">
<view class="tab-bar-item" wx:for="{{selectList}}" wx:key="index" data-index="{{index}}" data-path="{{item.pagePath}}" data-selected="{{item.selected}}" bindtap="onwidthTap">
<image class="cover-image" src="{{selected === item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<view class="cover-view {{selected === item.selected ? 'active' : ''}}" >{{item.text}}</view>
</view>
</view>
<view class="indicator-border"></view>
<view class="indicator">
<view class="indicator-item">
<image class="indicator-image" src="/images/jia.png"></image>
<view class="indicator-item-text">发布</view>
</view>
</view>
// custom-tab-bar/index.js
Component({
data: {
allList: [
[{
"pagePath": "/pages/jobs/index/index",
"iconPath": "/images/me-gray.png",
"selectedIconPath": "/images/me-green.png",
"text": "论坛",
"selected": "0"
},
{},
{
"pagePath": "/pages/jobs/me/me",
"iconPath": "/images/me-gray.png",
"selectedIconPath": "/images/me-green.png",
"text": "我的",
"selected": "1"
}
],
[{
"pagePath": "/pages/enterprise/index/index",
"iconPath": "/images/me-gray.png",
"selectedIconPath": "/images/me-green.png",
"text": "社区",
"selected": "2"
},
{},
{
"pagePath": "/pages/enterprise/me/me",
"iconPath": "/images/me-gray.png",
"selectedIconPath": "/images/me-green.png",
"text": "我的",
"selected": "3"
}
]
],
selectedList: []
},
/**
* 生命周期的方法:当组件被加载的时候调用
*/
lifetimes:{
attached(){
if(wx.getStorageSync('user') == '0'){
this.setData({
selectList:this.data.allList[0]
})
}else{
this.setData({
selectList:this.data.allList[1]
})
}
},
show(){
this.updateTabbar();
}
},
/**
* 组件的方法列表
*/
methods: {
onwidthTap(e) {
console.log(e);
let path = e.currentTarget.dataset.path;
let selected = e.currentTarget.dataset.selected;
wx.switchTab({
url:path
})
},
updateTabbar(){
const userType = wx.getStorageSync('user') || '0';
this.setData({
selectList:this.data.allList(userType)
})
}
}
})
<!--pages/jobs/me/me.wxml-->
<view class="switch-group" bindtap="onSwitch">
<image class="switch-image" src="../../../images/switch.png"></image>
<view class="switch-text">去社区</view>
</view>
// pages/jobs/me/me.js
Page({
onSwitch(){
wx.setStorageSync('user','1');
wx.switchTab({
url:'../../enterprise/index/index'
});
//强制更新自定义tabbar(需配合组件改造)
const tabbar = this.getTabBar();
tabbar.setData({ selectList: tabbar.data.allList[0] });
},
onShow() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: "1"
})
}
},
})
<!--pages/enterprise/me/me.wxml-->
<view class="switch-group" bindtap="onSwitchEvent">
<image class="switch-image" src="../../../images/switch.png"></image>
<view class="switch-text">去论坛</view>
</view>
// pages/enterprise/me/me.js
Page({
onSwitchEvent(){
wx.setStorageSync('user','0');
wx.switchTab({
url:'../../jobs/index/index'
});
//强制更新自定义tabbar(需配合组件改造)
const tabbar = this.getTabBar();
tabbar.setData({ selectList: tabbar.data.allList[0] });
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: "3"
})
}
},
})