feat(miniprogram): 实现自定义 tab bar 功能

- 在 app.json 中设置自定义 tab bar
- 新增 custom-tab-bar 组件实现自定义 tab bar
- 在各个页面中添加 onShow 方法，设置当前选中的 tab
- 优化部分页面样式，如添加滚动条等

miniprogram/app.json

@@ -26,6 +26,7 @@
     "pageOrientation": "portrait"
   },
   "tabBar": {
+    "custom": true,
     "selectedColor": "#1195db",
     "color": "#8a8a8a",
     "list": [
@@ -53,6 +54,12 @@
         "selectedIconPath": "./images/tabs/legal-.png",
         "iconPath": "./images/tabs/legal.png"
       },
+      {
+        "pagePath": "pages/maritime/maritime",
+        "text": "海事公告",
+        "selectedIconPath": "./images/tabs/ship-.png",
+        "iconPath": "./images/tabs/ship.png"
+      },
       {
         "pagePath": "pages/securityCheck/securityCheck",
         "text": "海事安检",

miniprogram/custom-tab-bar/index.js

@@ -0,0 +1,61 @@
+Component({
+  data: {
+    selected: 0,
+    selectedColor: "#1195db",
+    color: "#8a8a8a",
+    list: [
+      {
+        pagePath: "/pages/takePhoto/takePhoto",
+        text: "随身拍",
+        selectedIconPath: "../images/tabs/camera-.png",
+        iconPath: "../images/tabs/camera.png",
+      },
+      {
+        pagePath: "/pages/cert/cert",
+        text: "证书办理",
+        selectedIconPath: "../images/tabs/cert-.png",
+        iconPath: "../images/tabs/cert.png",
+      },
+      {
+        pagePath: "/pages/oilPrice/oilPrice",
+        text: "油价查询",
+        selectedIconPath: "../images/tabs/oilPrice-.png",
+        iconPath: "../images/tabs/oilPrice.png",
+      },
+      {
+        pagePath: "/pages/legal/legal",
+        text: "法律援助",
+        selectedIconPath: "../images/tabs/legal-.png",
+        iconPath: "../images/tabs/legal.png",
+      },
+      {
+        pagePath: "/pages/maritime/maritime",
+        text: "海事公告",
+        selectedIconPath: "../images/tabs/ship-.png",
+        iconPath: "../images/tabs/ship.png",
+      },
+      {
+        pagePath: "/pages/securityCheck/securityCheck",
+        text: "海事安检",
+        selectedIconPath: "../images/tabs/check-.png",
+        iconPath: "../images/tabs/check.png",
+      },
+    ],
+  },
+  attached() {},
+  methods: {
+    switchTab(e) {
+      const data = e.currentTarget.dataset;
+      const url = data.path;
+
+      wx.switchTab({
+        url,
+        success: () => {
+          this.setData({
+            selected: data.index,
+          });
+        },
+      });
+    },
+  },
+});

miniprogram/custom-tab-bar/index.json

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

miniprogram/custom-tab-bar/index.wxml

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

miniprogram/custom-tab-bar/index.wxss

@@ -0,0 +1,38 @@
+.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 image {
+  width: 27px;
+  height: 27px;
+}
+
+.tab-bar-item view {
+  font-size: 10px;
+}

miniprogram/pages/cert/cert.js

@@ -83,4 +83,11 @@ Page({
     this.getContacts();
     this.getIntroduce();
   },
+  onShow() {
+    if (typeof this.getTabBar === "function" && this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 1,
+      });
+    }
+  },
 });

miniprogram/pages/cert/cert.wxss

@@ -12,6 +12,7 @@
   border: 1rpx solid #eee;
   box-sizing: border-box;
   padding: 10rpx;
+  overflow: scroll;
 }
 
 .tel {

miniprogram/pages/legal/legal.js

@@ -36,4 +36,11 @@ Page({
   onLoad(options) {
     this.getIntroduce();
   },
+  onShow() {
+    if (typeof this.getTabBar === "function" && this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 3,
+      });
+    }
+  },
 });

miniprogram/pages/legal/legal.wxss

@@ -11,4 +11,5 @@
   border: 1rpx solid #eee;
   box-sizing: border-box;
   padding: 10rpx;
+  overflow: scroll;
 }

miniprogram/pages/maritime/maritime.js

@@ -89,6 +89,11 @@ Page({
   },
   onLoad(options) {},
   onShow() {
+    if (typeof this.getTabBar === "function" && this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 4,
+      });
+    }
     console.log("show");
     this.setData({
       list: [],

miniprogram/pages/oilPrice/oilPrice.js

@@ -39,4 +39,11 @@ Page({
   onLoad(options) {
     this.getOilPriceList();
   },
+  onShow() {
+    if (typeof this.getTabBar === "function" && this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 2,
+      });
+    }
+  },
 });

miniprogram/pages/securityCheck/securityCheck.js

@@ -137,6 +137,12 @@ Page({
     this.setData({
       loginStatus: wx.getStorageSync("userId"),
     });
+
+    if (typeof this.getTabBar === "function" && this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 5,
+      });
+    }
   },
   onLoad(options) {
     this.getList();

miniprogram/pages/takePhoto/takePhoto.js

@@ -410,6 +410,11 @@ Page({
     });
   },
   onShow() {
+    if (typeof this.getTabBar === "function" && this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 0,
+      });
+    }
     let userName = wx.getStorageSync("userName");
     let userId = wx.getStorageSync("userId");
     let phone = wx.getStorageSync("phone");

miniprogram/pages/takePhoto/takePhoto.wxml

@@ -66,7 +66,7 @@
   </view>
 </view>
 <view class="title">油价走势</view>
-<view class="pl30 pr30">
+<view class="pl30 pr30" style="padding-bottom: 200rpx;">
   <view class="df aic fs28 th">
     <view class="w50p tac">加油服务商</view>
     <view class="w50p tac">油价(元/吨)</view>