小程序需要根據(jù)角色展示不同的菜單
1.custom-tab-bar 微信提供了這個方法偎球，來動態(tài)設(shè)置菜單，然后我就想來整一個
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
鏈接里可以下載列子看衰絮，但是我用的wepy框架，而例子里是原生的小程序代碼猫牡，兩種代碼我整了半天也沒通起來，好不容易可以通過全局變量globalData通信了煌恢，但是菜單的選中狀態(tài)老是不對骇陈，還發(fā)現(xiàn)ios手機(jī)預(yù)覽菜單竟然不顯示瑰抵，折騰了老半天然后還是放棄了。婿崭。。逛球。

2. 自己寫組件
   整合了custom-tab-bar的代碼，寫了下面的組件

<template>
  <!--miniprogram/custom-tab-bar/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="toPage">
      <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
      <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
    </cover-view>
  </cover-view>
</template>
<script>
import wepy from 'wepy'

export default class MyTabBar extends wepy.component {
  data = {
    selected: 0,
    color: '#7A7E83',
    selectedColor: '#3cc51f',
    list: [{
      pagePath: '/pages/organ/classManage/list',
      text: '首頁',
      iconPath: '/assets/images/org-menu-1.png',
      selectedIconPath: '/assets/images/org-cm-detail-menu-1.png'
    }, {
      pagePath: '/pages/organ/classPublic/index',
      text: '個人中心',
      iconPath: '/assets/images/org-menu-2.png',
      selectedIconPath: '/assets/images/org-menu-2-select.png'
    }]
  }

  methods = {
    toPage(e) {
      let _index = e.currentTarget.dataset.index
      this.selected = _index
      this.$emit('toShow', _index)
    }
  }
}
</script>
<style>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

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

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}

</style>

組件引用

<template>
<view>
<home wx:if="{{showIndex === 0}}"></home>
<usercenter wx:if="{{showIndex === 1}}"></usercenter>
<tabbar @toShow.user='showHandle' ></tabbar>
</view>

</template>
<script>
import wepy from 'wepy'
import Home from '@/components/person/home'
import UserCenter from '@/components/person/userCenter'
import TabBar from '@/components/common/myTabBar'
export default class Index extends wepy.page {
  data = {
    showIndex: 0
  }
  methods = {
    showHandle (e) {
      this.showIndex = e
      this.$apply()
    }
  }
  components = {
    home: Home,
    usercenter: UserCenter,
    tabbar: TabBar
  }

  onLoad() {

  }
}
</script>