小程序：购物车

htmldev/wxMini/pages/collection/collection.js

@@ -4,7 +4,17 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    nav: [
+      {
+        name: '预售',
+        value: '1'
+      },
+      {
+        name: '现货',
+        value: '2'
+      }
+    ],
+    active: '1'
   },
 
   /**
@@ -61,5 +71,12 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+  handleNav(e) {
+    const { value } = e.detail
+
+    this.setData({
+      active: value
+    })
   }
 })

htmldev/wxMini/pages/collection/collection.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
-}
+  "usingComponents": {
+    "customer-tab": "../../components/customer-tab/index"
+  }
+}

htmldev/wxMini/pages/collection/collection.wxml

@@ -0,0 +1,4 @@
+<customer-tab
+  nav="{{nav}}"
+  active="{{active}}"
+  bind:change="handleNav"/>

htmldev/wxMini/pages/leavingAMessage/leavingAMessage.js

@@ -21,7 +21,7 @@ Page({
         value: '2'
       }
     ],
-    currentNav: '1'
+    active: '1'
   },
   freshing: false,
 
@@ -81,12 +81,10 @@ Page({
 
   },
   handleNav(e) {
-    const { item } = e.target.dataset
+    const { value } = e.detail
 
-    if (item.value) {
-      this.setData({
-        currentNav: item.value
-      })
-    }
+    this.setData({
+      active: value
+    })
   }
 })

htmldev/wxMini/pages/leavingAMessage/leavingAMessage.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
-    "van-loading": "@vant/weapp/loading/index"
+    "van-loading": "@vant/weapp/loading/index",
+    "customer-tab": "../../components/customer-tab/index"
   },
   "navigationBarBackgroundColor": "#CCCCCC",
   "backgroundTextStyle": "dark",

htmldev/wxMini/pages/leavingAMessage/leavingAMessage.wxml

@@ -10,15 +10,10 @@
         placeholder="搜索信息"></input>
     </view>
   </view>
-  <view class="nav-wrap">
-    <view
-      class="{{currentNav === item.value ? 'active' : ''}}"
-      wx:for="{{nav}}"
-      wx:key="value"
-      data-item="{{item}}"
-      bind:tap="handleNav">{{item.name}}
-    </view>
-  </view>
+  <customer-tab
+    nav="{{nav}}"
+    active="{{active}}"
+    bind:change="handleNav"/>
   <view class="list"
         wx:for="{{list}}"
         wx:key="index"

htmldev/wxMini/pages/leavingAMessage/leavingAMessage.wxss

@@ -8,41 +8,6 @@ page {
   padding-bottom: 152rpx;
 }
 
-.nav-wrap {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  border-bottom: 1rpx solid rgba(189, 189, 189, 1);
-}
-
-.nav-wrap view {
-  flex: 1;
-  padding: 24rpx 0;
-  line-height: 40rpx;
-  font-size: 28rpx;
-  color: rgba(51, 51, 51, 1);
-  text-align: center;
-}
-
-.nav-wrap view.active {
-  position: relative;
-  left: 0;
-  top: 0;
-  color: rgba(145, 179, 121, 1);
-}
-
-.nav-wrap view.active:after {
-  position: absolute;
-  left: 50%;
-  bottom: 0;
-  content: '';
-  width: 162rpx;
-  height: 8rpx;
-  border-radius: 40rpx 40rpx 0 0;
-  background: rgba(145, 179, 121, 1);
-  transform: translateX(-50%);
-}
-
 .list {
   width: 654rpx;
   padding-top: 42rpx;

htmldev/wxMini/project.private.config.json

@@ -8,7 +8,7 @@
       "list": [
         {
           "name": "111",
-          "pathName": "pages/goodsDetail/goodsDetail",
+          "pathName": "pages/leavingAMessage/leavingAMessage",
           "query": "",
           "launchMode": "default",
           "scene": null