Prechádzať zdrojové kódy

小程序:自定义tabbar

panyong 2 rokov pred
rodič
commit
293aa6ecd4
2 zmenil súbory, kde vykonal 54 pridanie a 29 odobranie
  1. 42 3
      htmldev/wxMini/app.js
  2. 12 26
      htmldev/wxMini/custom-tab-bar/index.js

+ 42 - 3
htmldev/wxMini/app.js

@@ -3,7 +3,7 @@ const { isMobile } = require('./utils/validate')
 const { checkUpdateVersion } = require('./utils/util')
 
 App({
-  onLaunch () {
+  onLaunch() {
     const that = this
     // 获取系统信息
     const systemInfo = wx.getSystemInfoSync()
@@ -24,9 +24,37 @@ App({
     navBarHeight: 0, // 导航栏高度
     menuRight: 0, // 胶囊距右方间距(方保持左、右间距一致)
     menuBottom: 0, // 胶囊距底部间距(保持底部间距一致)
-    menuHeight: 0 // 胶囊高度(自定义内容可与胶囊高度保证一致)
+    menuHeight: 0, // 胶囊高度(自定义内容可与胶囊高度保证一致)
+    tabBarList: [
+      {
+        'pagePath': 'pages/home/home',
+        'text': '首页',
+        'iconPath': 'image/tabBar/home_0@2x.png',
+        'selectedIconPath': 'image/tabBar/home_1@2x.png'
+      },
+      {
+        'pagePath': 'pages/partner/partner',
+        'text': '优秀合作社',
+        'iconPath': 'image/tabBar/home_0@2x.png',
+        'selectedIconPath': 'image/tabBar/home_1@2x.png'
+      },
+      {
+        'pagePath': 'pages/mine/mine',
+        'text': '我的',
+        'iconPath': 'image/tabBar/mine_0@2x.png',
+        'selectedIconPath': 'image/tabBar/mine_1@2x.png'
+      }
+    ],
+    asyncTabBarList: [
+      {
+        'pagePath': 'pages/news/news',
+        'text': '农事天地',
+        'iconPath': 'image/tabBar/home_0@2x.png',
+        'selectedIconPath': 'image/tabBar/home_1@2x.png'
+      }
+    ]
   },
-  async fetchUserData () {
+  async fetchUserData() {
     try {
       const { status, data } = await getUserInfo()
       if (status && Object.prototype.toString.call(data) === '[object Object]' && isMobile(data.user_phone)) {
@@ -43,5 +71,16 @@ App({
         this.globalData.userInfo = temp
       }
     } catch (e) {}
+    // this.hasPermission(1)
+  },
+  // 根据权限配置tabbar
+  hasPermission(role) {
+    if (role === 1) {
+      this.globalData.tabBarList.splice(2, 0, ...this.globalData.asyncTabBarList)
+
+      if (this.addTabBarList) {
+        this.addTabBarList(this.globalData.tabBarList)
+      }
+    }
   }
 })

+ 12 - 26
htmldev/wxMini/custom-tab-bar/index.js

@@ -1,3 +1,4 @@
+const app = getApp()
 Component({
   /**
    * 组件的属性列表
@@ -9,34 +10,19 @@ Component({
    */
   data: {
     active: 'pages/home/home',
-    list: [
-      {
-        'pagePath': 'pages/home/home',
-        'text': '首页',
-        'iconPath': 'image/tabBar/home_0@2x.png',
-        'selectedIconPath': 'image/tabBar/home_1@2x.png'
-      },
-      {
-        'pagePath': 'pages/partner/partner',
-        'text': '优秀合作社',
-        'iconPath': 'image/tabBar/home_0@2x.png',
-        'selectedIconPath': 'image/tabBar/home_1@2x.png'
-      },
-      {
-        'pagePath': 'pages/news/news',
-        'text': '农事天地',
-        'iconPath': 'image/tabBar/home_0@2x.png',
-        'selectedIconPath': 'image/tabBar/home_1@2x.png'
-      },
-      {
-        'pagePath': 'pages/mine/mine',
-        'text': '我的',
-        'iconPath': 'image/tabBar/mine_0@2x.png',
-        'selectedIconPath': 'image/tabBar/mine_1@2x.png'
-      }
-    ]
+    list: app.globalData.tabBarList
   },
+  attached() {
+    this.setData({
+      list: app.globalData.tabBarList
+    })
 
+    app.addTabBarList = res => {
+      this.setData({
+        list: res
+      })
+    }
+  },
   /**
    * 组件的方法列表
    */