收藏
回答

关于Custom-Tabbar的使用问题?

如图所示,有stu,teacher,my三个界面,我想做一个stu,my的tabbar和一个teacher,my的tabbar,故采用了custom-tabbar。

用mode界面分别跳转到stu,teacher界面

但现在是偶尔会出现tabber不显示的问题,请问如何解决?

这是custom-tabbar的相关文件

custom-tabbar/index.wxml

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}"
    bindtap="switchTab">
    <!-- <cover-image class="tab-bar-item-cover-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}">
    </cover-image> -->
    <cover-view class="tab-bar-item-cover-view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

custom-tabbar/index.js

const app = getApp();
Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#ff6700",
    list: []
  },
  lifetimes: {
    //组件的生命周期函数
    attached() {
      var that = this
      that.setData({
        list: app.globalData.list
      })
    },
  },
  methods: {
    switchTab(e) {
      let that = this
      const data = e.currentTarget.dataset
      const url = data.path
      that.setData({
        selected: data.index
      })
      wx.switchTab({ url })
    }
  }
})

custom-tabbar/index.wxss

.tab-bar {
  position: fixed;
  bottom0;
  left0;
  right0;
  height48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
  background-color: rgba(0000.33);
  position: absolute;
  left0;
  top0;
  width100%;
  height1px;
  transform: scaleY(0.5);
}


.tab-bar-item {
  flex1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


.tab-bar-item-cover-image {
  width27px;
  height27px;
}


.tab-bar-item-cover-view {
  font-size15px;
}
{
  "component": true
}


mode.js

const app = getApp()
Page({
  data: {},
  stufunction () {
    app.setTabbar1()
    wx.switchTab({
      url'../stu/stu',
    })
  },
  teacherfunction () {
    app.setTabbar2()
    wx.switchTab({
      url'../teacher/teacher',
    })
  }
})


app.js

//app.js
App({
  onLaunchfunction () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({
      successres => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      successres => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            successres => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo


              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  setTabbar1function () {
    let that = this
    that.globalData.list = [{
      "pagePath""/pages/stu/stu",
      "text""我参与的签到"
    },
    {
      "pagePath""/pages/my/my",
      "text""个人信息"
    },
    ]
  },
  setTabbar2function () {
    let that = this
    that.globalData.list = [{
      "pagePath""/pages/teacher/teacher",
      "text""我发起的签到"
    },
    {
      "pagePath""/pages/my/my",
      "text""个人信息"
    },
    ]
  },
  globalData: {
    userInfonull,
    backend"http://10.21.234.24:8080",
    list: []
  }
})
回答关注问题邀请回答
收藏
登录 后发表内容
问题标签