pref: change origin tab to customer tabbat

app.js

@@ -7,6 +7,7 @@ App({
     console.log('App onLaunch');
   },
   globalData: {
-    userInfo: null
+    userInfo: null,
+    selectedInex: 2
   }
 })

app.json

@@ -35,6 +35,10 @@
     "navigationBarTextStyle": "white"
   },
   "tabBar": {
+    "custom": true,
+    "color": "#000000",
+    "selectedColor": "#45A6B5",
+    "backgroundColor": "#ffffff",
     "list": [
       {
         "pagePath": "pages/index/index",

custom-tab-bar/index.js

@@ -0,0 +1,39 @@
+const app = getApp()
+Component({
+  data: {
+    selected: 2,
+    color: "#7A7E83",
+    selectedColor: "#45A6B5",
+    list: [{
+      pagePath: "/pages/index/index",
+      iconPath: "/imaes/home_nor@2x.png",
+      selectedIconPath: "/imaes/home_sel@2x.png",
+      text: "首页"
+    }, {
+      pagePath: "/pages/report/report",
+      iconPath: "/imaes/baogao_nor@2x.png",
+      selectedIconPath: "/imaes/baogao_sel@2x.png",
+      text: "报告"
+    },{
+      pagePath: "/pages/my/my",
+      iconPath: "/imaes/me_nor@2x.png",
+      selectedIconPath: "/imaes/me_sel@2x.png",
+      text: "我的"
+    }]
+  },
+  attached() {
+  },
+  ready () {
+    this.setData({
+      selected: app.globalData.selectedInex
+    })
+  },
+  methods: {
+    switchTab(e) {
+      const data = e.currentTarget.dataset
+      const url = data.path
+      app.globalData.selectedInex = data.index
+      wx.switchTab({url})
+    }
+  }
+})

custom-tab-bar/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

custom-tab-bar/index.wxml

@@ -0,0 +1,8 @@
+<!--pages/custom-tab-bar/index.wxml-->
+<cover-view class="tab-bar">
+  <cover-view class="tab-bar-border"></cover-view>
+  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
+    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
+    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
+  </cover-view>
+</cover-view>

custom-tab-bar/index.wxss

@@ -0,0 +1,39 @@
+/* pages/custom-tab-bar/index.wxss */
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 48px;
+  background: white;
+  display: flex;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tab-bar-border {
+  background-color: rgba(0, 0, 0, 0.33);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  transform: scaleY(0.5);
+}
+
+.tab-bar-item {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.tab-bar-item cover-image {
+  width: 27px;
+  height: 27px;
+}
+
+.tab-bar-item cover-view {
+  font-size: 10px;
+}