自定义tabbar

miniProject/app.json

@@ -44,6 +44,7 @@
         "selectedColor": "#0069FF",
         "borderStyle": "black",
         "backgroundColor": "#ffffff",
+        "custom": true,
         "list": [
             {
                 "pagePath": "pages/index/index",

miniProject/custom-tab-bar/index.js

+Component({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        curClick: 1, // 判断当前点击的索引下标
+        list: [{
+                "pagePath": "/pages/index/index",
+                "iconPath": "../images/home.png",
+                "selectedIconPath": "../images/home-b.png",
+                "text": "首页",
+                "curr": 1
+            },
+            {
+                "pagePath": "/pages/home/index",
+                "iconPath": "../images/cong.png",
+                "selectedIconPath": "../images/cong-b.png",
+                "text": "工作台",
+                "curr": 2
+            },
+            {
+                "pagePath": "/pages/me/index",
+                "iconPath": "../images/me.png",
+                "selectedIconPath": "../images/me-b.png",
+                "text": "我的",
+                "curr": 3
+            }
+        ]
+    },
+
+    methods: {
+        NavChange(e) {
+            // 获取穿过来的参数
+            // let curIndex = e.currentTarget.dataset.cur;
+            // 获取穿过来的参数
+            let path = e.currentTarget.dataset.path;
+            // 更新data中值
+            wx.switchTab({
+                url: path,
+            })
+
+        },
+    }
+
+
+})
\ No newline at end of file

miniProject/custom-tab-bar/index.json

+{
+    "component": true,
+    "usingComponents": {}
+  }
\ No newline at end of file

miniProject/custom-tab-bar/index.wxml

+<view class="tabbar_wrap">
+    <block>
+        <cover-view wx:for="{{list}}" wx:key="index" class="tabbar_item" bindtap="NavChange" data-cur="{{item.curr}}" data-path="{{item.pagePath}}">
+            <cover-image class="img" src="{{curClick==item.curr?item.selectedIconPath:item.iconPath}}"></cover-image>
+            <cover-view class="{{curClick==item.curr?'active text':'text'}}">
+                {{item.text}}
+            </cover-view>
+        </cover-view>
+    </block>
+</view>
\ No newline at end of file

miniProject/custom-tab-bar/index.wxss

+.tabbar_wrap {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    background-color: #FFFFFF;
+    height: 110rpx;
+    border-top: 1px solid #CCc;
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tabbar_wrap .tabbar_item {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+.tabbar_wrap .tabbar_item .img {
+    width: 45rpx;
+    height: 45rpx;
+}
+
+.tabbar_wrap .tabbar_item .text {
+    font-size: 28rpx;
+    margin-top: 5rpx;
+}
+
+.tabbar_wrap .tabbar_item .active {
+    color: #597BFF;
+}
+
+.tabbar_wrap .tabbar_item .addBtn {
+    width: 90rpx;
+    height: 90rpx;
+    padding: 10rpx;
+    background-color: #Ffffff;
+    border-radius: 100rpx;
+    position: absolute;
+    top: -40rpx;
+}
+
+.tabbar_wrap .tabbar_item .subMsg {
+    font-size: 28rpx;
+    margin-top: 50rpx;
+}
\ No newline at end of file

miniProject/pages/home/index.js

@@ -103,6 +103,15 @@ Page({
                 tourItems
             })
         })
+        this.activeTabBar(2)
+    },
+    activeTabBar(currentMenu) {
+        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+            this.getTabBar().setData({
+                // 当前页面的 tabBar 索引
+                curClick: currentMenu
+            })
+        }
     },
     goOtherPage: function(e) {
         const { path } = e.currentTarget.dataset.value

miniProject/pages/index/index.js

@@ -36,8 +36,16 @@ Page({
         })
     },
 
-    onShow: function() {
-
+    onShow:function(){
+        this.activeTabBar(1)
+      },
+      activeTabBar(currentMenu) {
+        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+            this.getTabBar().setData({
+                // 当前页面的 tabBar 索引
+                curClick: currentMenu
+            })
+        }
     },
     backBtn(){
         this.setData({

miniProject/pages/me/index.js

@@ -26,6 +26,17 @@ Page({
     this.setData({ name: name, accountName: accountName })
     this.getUserInfo()
   },
+  onShow:function(){
+    this.activeTabBar(3)
+  },
+  activeTabBar(currentMenu) {
+    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+        this.getTabBar().setData({
+            // 当前页面的 tabBar 索引
+            curClick: currentMenu
+        })
+    }
+},
   All(e){
     console.log(e)
   },