zoukankan      html  css  js  c++  java
  • 小程序 之自定义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>
  • 相关阅读:
    poj 3280 Cheapest Palindrome(区间DP)
    POJ 2392 Space Elevator(多重背包)
    HDU 1285 定比赛名次(拓扑排序)
    HDU 2680 Choose the best route(最短路)
    hdu 2899 Strange fuction (三分)
    HDU 4540 威威猫系列故事――打地鼠(DP)
    HDU 3485 Count 101(递推)
    POJ 1315 Don't Get Rooked(dfs)
    脱离eclipse,手动写一个servlet
    解析xml,几种方式
  • 原文地址:https://www.cnblogs.com/yang-2018/p/13776639.html
Copyright © 2011-2022 走看看