小程序：新增导航自定义组件

htmldev/wxMini/components/customer-tab/index.js

@@ -0,0 +1,29 @@
+Component({
+  options: {
+    addGlobalClass: true
+  },
+  externalClasses: ['nav-width'],
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    nav: Array,
+    active: null
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    change(e) {
+      const { item } = e.target.dataset
+
+      this.triggerEvent('change', item)
+    }
+  }
+})

htmldev/wxMini/components/customer-tab/index.json

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

htmldev/wxMini/components/customer-tab/index.scss

@@ -0,0 +1,34 @@
+.nav-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1rpx solid rgba(189, 189, 189, 1);
+}
+
+.nav {
+  width: 50%;
+  padding: 24rpx 0;
+  line-height: 40rpx;
+  font-size: 28rpx;
+  color: rgba(51, 51, 51, 1);
+  text-align: center;
+
+  &.active {
+    position: relative;
+    left: 0;
+    top: 0;
+    color: rgba(145, 179, 121, 1);
+
+    &: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%);
+    }
+  }
+}

htmldev/wxMini/components/customer-tab/index.wxml

@@ -0,0 +1,9 @@
+<view class="nav-wrap">
+  <view
+    class="nav {{active === item.value ? 'active' : ''}} nav-width"
+    wx:for="{{nav}}"
+    wx:key="value"
+    data-item="{{item}}"
+    bind:tap="change">{{item.name}}
+  </view>
+</view>