sxx的技术专栏 Nodejs and Javascript Coder

小程序mpvue自定义底部导航栏高亮失效解决办法

2020-07-22
blockxia

阅读:


1. 自定义导航组件引入之后每个tab页面index.vue写以下方法可解决(注意方法写最上面)

   if (
      typeof this.$root.$mp.page.getTabBar === "function" &&
      this.$root.$mp.page.getTabBar()
    ) {
      this.$root.$mp.page.getTabBar().setData({
        activeIndex: 0 //对应页面的index
      });
    }

2. 页面写上onShow()函数,不可以的话就加上async

async onShow() {
    if (
      typeof this.$root.$mp.page.getTabBar === "function" &&
      this.$root.$mp.page.getTabBar()
    ) {
      this.$root.$mp.page.getTabBar().setData({
        activeIndex: 2 //对应页面的index
      });
    }
    this.fnobjlist = wx.getStorageSync("userInfo");
    // 通过openId 去本地缓存查看是否有用户缓存数据
    let openid = await getStorage("openid");
    let userInfo = await getStorage(openid);
    this.isLogin = wx.getStorageSync("userInfo").token && true;
    if (userInfo) {
      // 本地有缓存数据
      this.userInfo = userInfo;
    } else {
      // wx.getUserInfo获取用户登录信息
      let result = await getUserInfo();
      this.userInfo = result.userInfo;
      // 通过openId将对应的用户信息缓存到本地
      setStorage(this.openid, userInfo);
    }
  },


Similar Posts

上一篇 css实现瀑布流

Comments