小程序：自定义tabbar

htmldev/wxMini/app.json

@@ -44,6 +44,7 @@
     "weui": true
   },
   "tabBar": {
+    "custom": true,
     "color": "#999999",
     "selectedColor": "#333333",
     "backgroundColor": "#FFFFFF",

htmldev/wxMini/custom-tab-bar/index.js

@@ -0,0 +1,62 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {},
+
+  /**
+   * 组件的初始数据
+   */
+  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'
+      }
+    ]
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onChange(e) {
+      const detail = e.detail
+      wx.switchTab({
+        url: `/${detail}`
+      })
+
+      this.setData({
+        active: detail
+      })
+    },
+    init() {
+      const page = getCurrentPages().pop()
+
+      this.setData({
+        active: `${page.route}`
+      })
+    }
+  }
+})

htmldev/wxMini/custom-tab-bar/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-tabbar": "@vant/weapp/tabbar/index",
+    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
+  }
+}

htmldev/wxMini/custom-tab-bar/index.wxml

@@ -0,0 +1,16 @@
+<van-tabbar
+  active="{{ active }}"
+  placeholder="{{true}}"
+  z-index="999"
+  active-color="rgba(107, 133, 89, 1)"
+  inactive-color="rgba(179, 179, 179, 1)"
+  bind:change="onChange">
+  <block
+    wx:for="{{list}}"
+    wx:key="pagePath">
+    <van-tabbar-item
+      name="{{item.pagePath}}"
+      icon="home-o">{{item.text}}
+    </van-tabbar-item>
+  </block>
+</van-tabbar>

htmldev/wxMini/pages/home/home.js

@@ -84,7 +84,7 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow() {
-
+    this.getTabBar().init()
   },
 
   /**

htmldev/wxMini/pages/home/home.wxml

@@ -82,3 +82,5 @@
     </view>
   </view>
 </view>
+  <!--自定义tabbar页面被遮挡-->
+<view style="padding-bottom:25%;"></view>

htmldev/wxMini/pages/mine/mine.js

@@ -23,7 +23,7 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow() {
-
+    this.getTabBar().init()
   },
 
   /**

htmldev/wxMini/pages/mine/mine.wxml

@@ -63,3 +63,5 @@
     </view>
   </view>
 </view>
+  <!--自定义tabbar页面被遮挡-->
+<view style="padding-bottom:25%;"></view>

htmldev/wxMini/pages/news/news.js

@@ -23,7 +23,7 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow() {
-
+    this.getTabBar().init()
   },
 
   /**

htmldev/wxMini/pages/news/news.wxml

@@ -66,3 +66,5 @@
   <image
     src=""></image>
 </view>
+  <!--自定义tabbar页面被遮挡-->
+<view style="padding-bottom:25%;"></view>

htmldev/wxMini/pages/partner/partner.js

@@ -23,7 +23,7 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow() {
-
+    this.getTabBar().init()
   },
 
   /**

htmldev/wxMini/pages/partner/partner.wxml

@@ -45,3 +45,5 @@
     </view>
   </view>
 </view>
+  <!--自定义tabbar页面被遮挡-->
+<view style="padding-bottom:25%;"></view>