收藏
回答

双角色tabbar底部导航栏,切换不正常,什么原因?

双角色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"
            })
          }
    },
})
回答关注问题邀请回答
收藏
登录 后发表内容