wepy小程序自定义菜单

小程序需要根据角色展示不同的菜单
1.custom-tab-bar 微信提供了这个方法，来动态设置菜单，然后我就想来整一个
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
链接里可以下载列子看，但是我用的wepy框架，而例子里是原生的小程序代码，两种代码我整了半天也没通起来，好不容易可以通过全局变量globalData通信了，但是菜单的选中状态老是不对，还发现ios手机预览菜单竟然不显示，折腾了老半天然后还是放弃了。。。。

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>