小程序模拟tabbar实现切换用户身份展示不同tabbar

思路

类似H5移动页面那种，模拟底部tabbar。使用vantweapp UI组件库，配合swiper实现切换效果

效果图展示

核心代码展示 — van-tabbar是vantweapp中的组件

<!-- 学生端主页 -->
<swiper current="{{currentData}}" class='swiper' circular='{{true}}' duration='0' bindchange='swiperChange'>
	<swiper-item>学生A</swiper-item>
	<swiper-item>
      <van-button type="primary" bindtap="toTeacher">去老师端</van-button>
			<van-button type="primary" bindtap="toOrganization">去机构端</van-button>
  </swiper-item>
</swiper>
<van-tabbar active="{{active}}" z-index='9' bind:change="onChange">
	<van-tabbar-item  icon="home-o">标签</van-tabbar-item>
	<van-tabbar-item  icon="search">标签</van-tabbar-item>
</van-tabbar>

// pages/tabbar-student/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentData:0,
    active:0
  },

  //tabbar切换，swpier跟随切换
  onChange(e){
    this.setData({
      currentData:e.detail
    })
  },

  //监听swpier切换，tabbar跟随切换
  swiperChange(e){
    this.setData({
      active: e.detail.current
    })
  },
  toTeacher(){
    wx.reLaunch({
      url:'../tabbar-teacher/index'
    })
  },
  toOrganization(){
    wx.reLaunch({
      url: '../tabbar-organization/index',
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

其他页面类似，代码链在最下面了

PS：效果图目前的小程序框架 ----链接是我自己写的demo，有什么问题或者指教可以留言
百度网盘
提取码: jhyt