feat: using custom tabbar

Author: LeeJim

miniprogram/app.json

@@ -10,6 +10,22 @@
     "pages/learn/detail",
     "pages/search/index"
   ],
+  "tabBar": {
+    "custom": true,
+    "color": "#000",
+    "selectedColor": "#000",
+    "backgroundColor": "#fff",
+    "list": [{
+      "pagePath": "pages/index/index",
+      "text": "首页"
+    }, {
+      "pagePath": "pages/learn/index",
+      "text": "技巧"
+    }, {
+      "pagePath": "pages/my/index",
+      "text": "我的"
+    }]
+  },
   "window": {
     "backgroundColor": "#f6f6f6",
     "backgroundTextStyle": "light",
@@ -38,6 +54,8 @@
     "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-search": "tdesign-miniprogram/search/search",
     "t-switch": "tdesign-miniprogram/switch/switch",
+    "t-popup": "tdesign-miniprogram/popup/popup",
+    "t-image": "tdesign-miniprogram/image/image",
     "t-steps": "tdesign-miniprogram/steps/steps",
     "t-step": "tdesign-miniprogram/steps/step-item"
   }

miniprogram/custom-tab-bar/index.js

@@ -0,0 +1,45 @@
+
+Component({
+  data: {
+    value: 'index',
+    list: [{
+      icon: 'home',
+      value: 'index',
+      label: '首页',
+    },{
+      icon: 'tips',
+      value: 'learn',
+      label: '发现',
+    }, {
+      icon: 'user',
+      value: 'my',
+      label: '我的'
+    }]
+  },
+  lifetimes: {
+    ready() {
+      const pages = getCurrentPages();
+      const curPage = pages[pages.length - 1];
+
+      if (curPage) {
+        const nameRe = /pages\/(\w+)\/index/.exec(curPage.route);
+
+        if (nameRe[1]) {
+          this.setData({
+            value: nameRe[1]
+          })
+        }
+      }
+    }
+  },
+  methods: {
+    handleChange(e) {
+      const { value } = e.detail;
+
+      // this.setData({ value });
+      wx.switchTab({
+        url: `/pages/${value}/index`,
+      })
+    }
+  }
+})

miniprogram/custom-tab-bar/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
+    "t-tab-bar-item": "tdesign-miniprogram/tab-bar/tab-bar-item"
+  }
+}

miniprogram/custom-tab-bar/index.less

@@ -0,0 +1 @@
+/* custom-tab-bar/index.wxss */

miniprogram/custom-tab-bar/index.wxml

@@ -0,0 +1,5 @@
+<t-tab-bar value="{{value}}" bind:change="handleChange">
+  <t-tab-bar-item wx:for="{{list}}" wx:key="index" icon="{{item.icon}}" value="{{item.value}}">
+    {{item.label}}
+  </t-tab-bar-item>
+</t-tab-bar>

miniprogram/pages/index/index.js

@@ -8,22 +8,9 @@ let isSubscribeShow = false;
 Page({
   data: {
     list: [],
-    value: 'index',
     searchKeyword: '',
+    chineseMap,
     subscribeModalVisible: false,
-    tabbars: [{
-      text: '首页',
-      value: 'index',
-      icon: 'home'
-    }, {
-      text: '技巧',
-      value: 'learn',
-      icon: 'tips'
-    }, {
-      text: '个人中心',
-      value: 'my',
-      icon: 'user'
-    }]
   },
 
   onLoad() {
@@ -54,18 +41,10 @@ Page({
   },
 
   handleTap(e) {
-    const { item } = e.detail;
+    const { id } = e.currentTarget.dataset;
 
     wx.navigateTo({
-      url: '../detail/index?id=' + item.id
-    })
-  },
-
-  handleTabbarChange({ detail }) {
-    const { value } = detail;
-    
-    wx.redirectTo({
-      url: `../${value}/index`
+      url: '../detail/index?id=' + id
     })
   },
 

miniprogram/pages/index/index.json

@@ -1,6 +1,6 @@
 {
   "navigationBarTitleText": "程序员做饭",
-  "navigationStyle": "custom",
+  "backgroundColor": "#fff",
   "usingComponents": {
   }
 }

miniprogram/pages/index/index.less

@@ -1,6 +1,4 @@
-page {
-  padding: 0 0 200rpx;
-}
+
 
 .brand {
   display: flex;
@@ -30,4 +28,31 @@ page {
 .container {
   margin-top: 32rpx;
   padding: 0 32rpx;
+}
+
+.tabs {
+  height: 100%;
+}
+
+.t-tabs__scroll {
+  min-height: 100vh;
+  background-color: #f3f3f3;
+}
+
+.card {
+  margin: 24rpx;
+  padding: 24rpx;
+  border-radius: 8rpx;
+  box-shadow: 2rpx 2rpx 10rpx rgba(0, 0, 0, .3);
+}
+
+.wrapper {
+  box-sizing: border-box;
+  height: 100vh;
+  border-bottom: env(safe-area-inset-bottom, 28rpx) solid #fff;
+  padding-bottom: 50px ;
+}
+
+scroll-view {
+  height: 100%;
 }

miniprogram/pages/index/index.wxml

@@ -28,5 +28,4 @@
   bind:confirm="handleSubscribe"
 />
 
-<include src="/templates/tabbar.wxml" />
 <include src="/templates/base.wxml" />

miniprogram/pages/learn/index.js

@@ -4,34 +4,12 @@ Page({
 
   data: {
     info,
-    value: 'learn',
-    tabbars: [{
-      text: '首页',
-      value: 'index',
-      icon: 'home'
-    }, {
-      text: '技巧',
-      value: 'learn',
-      icon: 'tips'
-    }, {
-      text: '个人中心',
-      value: 'my',
-      icon: 'user'
-    }]
   },
 
   onLoad: function (options) {
 
   },
 
-  handleTabbarChange({ detail }) {
-    const { value } = detail;
-    
-    wx.redirectTo({
-      url: `../${value}/index`
-    })
-  },
-
   onShareAppMessage: function () {
 
   }