小程序：2栏导航组件化

htmldev/wxMini/pages/businessDetail/businessDetail.js

@@ -15,7 +15,7 @@ Page({
         value: '2'
       }
     ],
-    currentNav: '1',
+    active: '1',
     list: [],
     leftList: [],
     rightList: []
@@ -77,12 +77,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/businessDetail/businessDetail.json

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

htmldev/wxMini/pages/businessDetail/businessDetail.wxml

@@ -15,15 +15,10 @@
   </swiper>
 </view>
 <view class="business-name">张三供应商</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="business-info"

htmldev/wxMini/pages/businessDetail/businessDetail.wxss

@@ -25,41 +25,6 @@
   color: rgba(51, 51, 51, 1);
 }
 
-.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%);
-}
-
 .business-info {
   display: flex;
   flex-direction: column;

htmldev/wxMini/pages/goodsDetail/goodsDetail.js

@@ -15,7 +15,7 @@ Page({
         value: '2'
       }
     ],
-    currentNav: '1'
+    active: '1'
   },
 
   /**
@@ -74,12 +74,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/goodsDetail/goodsDetail.json

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

htmldev/wxMini/pages/goodsDetail/goodsDetail.scss

@@ -68,42 +68,6 @@
   }
 }
 
-
-.nav-wrap {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  border-bottom: 1rpx solid rgba(189, 189, 189, 1);
-}
-
-.nav-wrap view {
-  flex: 1;
-  padding: 44rpx 0 24rpx;
-  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%);
-}
-
 .business-info {
   display: flex;
   flex-direction: column;

htmldev/wxMini/pages/goodsDetail/goodsDetail.wxml

@@ -26,15 +26,10 @@
     <text class="unit">/ kg</text>
   </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="business-info"