小程序 之自定义tabbar与权限控制

Component({
  options: {
    multipleSlots: true //在组件定义时的选项中启用多slot支持},  /**
   * 组件的属性列表   */properties: {
    color:{
      type:String,
      value:'#333'},
    selectedColor:{
      type:String,
      value:'#1aad19'},
    backgroundColor:{
      type:String,
      value:''},
    position:{
      type:String,
      value:'bottom'},
    borderStyle:{
      type: String,
      value:'#ccc'},
    list:{
      type:Array,
      value:[]
    }
  },

  data: {

  },

  methods: {

  }
})

.weui-flex {display:-webkit-box;display:-webkit-flex;display:flex}.weui-flex__item {-webkit-box-flex:1;-webkit-flex:1;flex:1}.menu-item {height:100rpx;text-align:center;padding-top:5rpx;
}.img {width:60rpx;height:60rpx;display:block;margin:auto;
}.clear {clear:both;
}.tab-bar {position:fixed;width:100%}.tabbar_text {font-size:28rpx;position:relative;top:-12rpx;
}

<view wx:if="{{list.length > 1}}"class="weui-flex tab-bar"style="color: {{color}}; background: {{backgroundColor}}; {{position=='top'? 'top: 0' : 'bottom: 0'}}; {{borderStyle? (position=='top'? 'border-bottom: solid 1px '+borderStyle + ';' : 'border-top: solid 1px '+borderStyle + ';') : ''}}">
  <block wx:for="{{list}}"wx:key="pagePath"><navigator hover-class="none"url="{{item.pagePath}}"open-type="switchTab"class="weui-flex__item menu-item {{item.class}}"style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : selectedColor) : ''}}"wx:if="{{item.hidden!==true}}">  <image src="https://tool.4xseo.com/article/{{item.selectedIconPath}}"wx:if="{{item.active}}"class="img"></image>  <image src="https://tool.4xseo.com/article/{{item.iconPath}}"wx:if="{{!item.active}}"class="img"></image>  <text class='tabbar_text'>{{item.text}}</text></navigator>
  </block>
  <view class="clear"></view></view>

{  "pages": ["pages/check/index","pages/index/index","pages/asset/list","pages/mine/index"],  "tabBar": {"list": [
      {"pagePath": "pages/index/index","iconPath": "/image/icon_API.png","selectedIconPath": "/image/icon_API_HL.png","text": "电子名片"},
      {"pagePath": "pages/check/index","iconPath": "/image/icon_API.png","selectedIconPath": "/image/icon_API_HL.png","text": "电子样本"},
      {"pagePath": "pages/mine/index","iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png","text": "视频浏览"}
    ]
  },  "usingComponents": {"my-tabbar": "/component/tabbar/tabbar"},  "window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},  "sitemapLocation": "sitemap.json"}

App({
  onLaunch: function() {
    wx.hideTabBar({
      animation: false,
    })
  },
  util: require('./api.js'),
  getTabList: function() {var tabItemList =[{"pagePath": "/pages/index/index","text": "电子名片","iconPath": "/image/icon_API.png","selectedIconPath": "/image/icon_API_HL.png","active": false},
      {"pagePath": "/pages/check/index","text": "电子样本","iconPath": "/image/icon_API.png","selectedIconPath": "/image/icon_API_HL.png","active": false},
      {"pagePath": "/pages/mine/index","text": "视频浏览","iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png","active": false}
    ];returntabItemList;
  },
  initTabBar(app, activeIdx) {var tabItemList = this.getTabList();this.util.request('https://www.baidu.com', {}, 'Get').then(function(res) {      //同步判断是否有权限，没有权限则隐藏  tabItemList[0].hidden = !true;
      tabItemList[2].hidden = !false;      if (activeIdx >= 0 && activeIdx <tabItemList.length) {
        tabItemList[activeIdx].active = true;
      }
      app.setData({tabItemList})
    })return //去除隐藏项，只有一个tab时，隐藏底部导航var newBar =[]for (var i = 0; i < tabItemList.length; i++) {      if (tabItemList[i].hidden != true) {
        newBar.push(tabItemList[i])
      }
    }returnnewBar;
  }
})

var app =getApp()
Page({
  data: {

  },

  onLoad: function(options) {
    
  },

  onShow: function() {app.initTabBar(this, 1);},
})

<navigator url="/pages/asset/list">详情</navigator><my-tabbar  list="{{tabItemList}}"></my-tabbar>