第60讲公共Tabs组件封装

新建Tabs组件
Tabs.wxml

<view class="tabs">
  <view class="tabs_title">
    <view
      bindtap="handleItemTap"
      data-index="{{index}}"
      wx:for="{{tabs}}"
      wx:key="id"
      class="title_item {{item.isActive?'active':''}}">
      {{item.value}}
    </view>
   
  </view>
  <view class="tabs_content">
    <slot></slot>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Tabs.wxss

.tabs .tabs_title {
  display: flex;
}
.tabs .tabs_title .title_item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15rpx 0;
  flex: 1;
}
.tabs .tabs_title .active {
  color: var(--themeColor);
  border-bottom: 5rpx solid currentColor;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Tabs.js

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabs:Array,
    value:[]
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 获取索引
      const {index}=e.currentTarget.dataset;
      // 触发 父组件中的自定义事件
      this.triggerEvent("tabsItemChange",{index});
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

order里面：

引入组件：

{
    "usingComponents": {
        "Tabs":"../../components/Tabs/Tabs"
    },
  "navigationBarTitleText": "订单查询",
  "enablePullDownRefresh":true,
  "backgroundTextStyle":"dark"
  }
1
2
3
4
5
6
7
8

传入handleTabsItemChange事件

<!-- <view class="tabs">
  <view class="tabs_title">
    <view
      bindtap="handleItemTap"
      data-index="{{index}}"
      wx:for="{{tabs}}"
      wx:key="id"
      class="title_item {{item.isActive?'active':''}}">
      {{item.value}}
    </view>
   
  </view>
  <view class="tabs_content">
    <view class="order_main">
      <view 
        wx:for="{{orders}}"
        wx:key="id"
      class="order_item">
        <view class="order_no_row">
          <view class="order_no_text">订单编号</view>
          <view class="order_no_value">{{item.orderNo}}</view>
        </view>
        <view class="order_price_row">
          <view class="order_price_text">订单价格</view>
          <view class="order_price_value">¥{{item.totalPrice}}</view>
        </view>
        <view class="order_time_row">
          <view class="order_time_text">订单日期</view>
          <view class="order_time_value">{{item.createDate}}</view>
        </view>
      </view>
    </view>
  </view>
</view> -->

<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">
  <view class="order_main">
      <view 
        wx:for="{{orders}}"
        wx:key="id"
      class="order_item">
        <view class="order_no_row">
          <view class="order_no_text">订单编号</view>
          <view class="order_no_value">{{item.orderNo}}</view>
        </view>
        <view class="order_price_row">
          <view class="order_price_text">订单价格</view>
          <view class="order_price_value">¥{{item.totalPrice}}</view>
        </view>
        <view class="order_time_row">
          <view class="order_time_text">订单日期</view>
          <view class="order_time_value">{{item.createDate}}</view>
        </view>
      </view>
    </view>
</Tabs>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

改个事件名：获取Tabs组件传来的index

  
    /**
     * tab点击事件处理
     * @param {} e 
     */
    handleTabsItemChange(e){
    //   const {index}=e.currentTarget.dataset;
     const {index}=e.detail;  
    // 切换标题
      this.changeTitleByIndex(index);
      
      // 获取订单列表
      this.QueryParams.type=index;
      this.QueryParams.page=1;
      this.setData({
        orders:[]
      })
      this.getOrders();
  
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20