微信小程序自定义选择组件

html
// index.wxml
<view class="order__item">
  <view class="header">
    <view class="order__id">{{orderInfo.id}}</view>
 
    <view class="actions">
      <view class="desc">回单审核</view>
      <view wx:if="{{!isSelected}}" class="checkbox" bind:tap="toggleSelect"></view>
      <view wx:else class="checkbox checked" bind:tap="toggleSelect"></view>
    </view>
  </view>
 
  <view class="list" bind:tap="goPage">
    <view class="row">
      <view class="desc">姓名</view>
      <view class="content">{{orderInfo.name}}</view>
    </view>
    <view class="row">
      <view class="desc">地址</view>
      <view class="content">{{orderInfo.age}}</view>
    </view>
  </view>
 
  <view class="footer">
    <view class="action primary" bind:tap="notifyOrderItem">确认</view>
  </view>
</view>

js
// index.js
Component({
  properties: {
    orderInfo: Object,
    isAllSelected: Boolean,
  },
 
  data: {
    isSelected: false,
  },
 
  observers: {
    isAllSelected: function (newValue) {
      if (newValue === true)
        this.setData({
          isSelected: true,
        });
    },
  },
 
  methods: {
    notifyOrderItem() {
      this.triggerEvent("notifyOrderList", this.properties.orderInfo.id);
    },
      
  	goPage(){
      this.triggerEvent("goOrderDetailPage");
    },
 
    toggleSelect() {
      // 当前选中，进行取消
      if (this.data.isSelected) {
        this.setData({ isSelected: false });
        this.triggerEvent("toggleSelect", {
          id: this.properties.orderInfo.id,
          type: "remove",
        });
      }
      // 当前未选
      else {
        this.setData({ isSelected: true });
        this.triggerEvent("toggleSelect", {
          id: this.properties.orderInfo.id,
          type: "add",
        });
      }
    },
  },
});

html
<OrderItem
  class="custom-item"
  isAllSelected="{{isAllSelected}}"
  orderInfo="{{item}}"
  wx:for="{{orderList}}"
  wx:key="id"
  bind:toggleSelect="toggleSelect"
  bind:notifyOrderList="notifyOrderList"
  bind:goOrderDetailPage="goOrderDetailPage"
/>