小程序 之自定義tabbar與權限控制

一、效果圖

二、自定義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="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image>
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image>
      <text class='tabbar_text'>{{item.text}}</text>
    </navigator>
  </block>
  <view class="clear"></view>
</view>

三、使用tabbar

app.json

{
  "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.js

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
      }
    ];
    return tabItemList;
  },
  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])
      }
    }
    return newBar;
  }
})

 

index.js

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

  },

  onLoad: function (options) {
    
  },

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

index.wxml

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