小程序功能实现案例

实现自定义的checkbox

效果图：

// wxml
<view class="container">
  <checkbox-group bindchange="checkboxChange">
    <view class="checkbox_item" wx:for="{{checkboxItems}}" wx:key="{{index}}" >
      <label>
        <checkbox color="red" hidden value="{{item.name}}" checked="{{item.checked}}"/>
        <view class="icon_wrap">
          <view class="icon" style="opacity:{{item.checked? 1:0}} "></view>
        </view>
        <text class="checkbox_content">{{item.name}}</text>
      </label>
    </view>
  </checkbox-group>
</view>

// wxss
.checkbox_item {
  margin-left: 20rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
}
.icon_wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 16rpx;
  width: 36rpx;
  height: 36rpx;
  border: 1px solid silver;
}
.icon_wrap>.icon {
  position: absolute;
  top: 6rpx;
  left: 6rpx;
  height: 24rpx;
  width: 24rpx;
  background-color: red;
  opacity: 0;
}
.checkbox_content {
  vertical-align: middle;
}

// js
Page({
  data: {
    checkboxItems: [
      {name: 'USA', checked: true},
      {name: 'CHN'},
      {name: 'FRA'},
      {name: '中国'},
    ]
  },
  checkboxChange: function (e) {
    var active = e.detail.value
    var changedData = {}
    var data = this.data.checkboxItems
    for (var i in data) {
      if (active.indexOf(data[i].name) !== -1) {
        changedData['checkboxItems[' + i + '].checked'] = true
      } else {
        changedData['checkboxItems[' + i + '].checked'] = false
      }
    }
    this.setData(changedData)
  }
})

使用多列选择器

1. 点击确定时显示选中的项。
2. 点击取消时不改变先前选中的项，并且将选中项重置为先前选中的项。

效果图：

// wxml
<view class="selector">
  <picker mode="multiSelector" range="{{multData}}" value="{{multIndex}}" bindchange="multPickerChange" bindcolumnchange="multPickerColumnChange" bindcancel="multPickerCancel">
    <view><button type="primary" class="btn">请选择条目</button></view>
    <view wx:if="currentMultData[0]" class="current">当前选择:{{currentMultData[0][currentMultIndex[0]]}},{{currentMultData[1][currentMultIndex[1]]}},{{currentMultData[2][currentMultIndex[2]]}}</view>
  </picker>
</view>

// wxss
.selector {
  padding: 30rpx;
}
.selector .btn {
  margin: 0; /*重置margin,否则button居中显示*/
  width: 300rpx;
  height: 100rpx;
}
.selector .current {
  padding: 20rpx 0;
}

// js
Page({
  data: {
    multData: [
      ['1', '2'],
      ['1-1', '1-2', '1-3'],
      ['1-1-1', '1-1-2', '1-1-3']
    ],
    multIndex: [0, 0, 0],
    currentMultData: [
      ['1', '2'],
      ['1-1', '1-2', '1-3'],
      ['1-1-1', '1-1-2', '1-1-3']
    ],
    currentMultIndex: [0, 0, 0]
  },
  multPickerChange: function (e) { // 点击确定时触发，修改当前显示的数据
    this.setData({
      currentMultData: this.data.multData,
      currentMultIndex: this.data.multIndex
    })
  },
  multPickerColumnChange: function (e) { // 改变列中数据时触发
    var column = e.detail.column // 当前列
    var value = e.detail.value // 当前列中的第几项
    var data = {
      multData: this.data.multData,
      multIndex: this.data.multIndex
    }
    data.multIndex[column] = value
    switch (column) {
      case 0:
        switch (data.multIndex[0]) {
          case 0: // 第0列第0项
            data.multData[1] = ['1-1', '1-2', '1-3'];
            data.multData[2] = ['1-1-1', '1-1-2', '1-1-3'];
            break;
          case 1: // 第0列第1项
            data.multData[1] = ['2-1', '2-2'];
            data.multData[2] = ['2-1-1', '2-1-2', '2-1-3'];
            break;
        }
        data.multIndex[1] = 0
        data.multIndex[2] = 0
        break;
      case 1:
        switch (data.multIndex[0]) {
          case 0:
            switch (data.multIndex[1]) {
              case 0: 
                data.multData[2] = ['1-1-1', '1-1-2', '1-1-3'];
                break;
              case 1:
                data.multData[2] = ['1-2-1', '1-2-2', '1-2-3', '1-2-4'];
                break;
              case 2:
                data.multData[2] = ['1-3-1', '1-3-2'];
                break;
            }
            break;
          case 1:
            switch (value) {
              case 0:
                data.multData[2] = ['2-1-1', '2-1-2', '2-1-3'];
                break;
              case 1:
                data.multData[2] = ['2-2-1', '2-2-2'];
                break;
            }
            break;
        }
        data.multIndex[2] = 0
        break;
    }
    this.setData(data)
  },
  multPickerCancel: function () { // 点击取消时触发，将数据重置
    this.setData({
      multData: this.data.currentMultData,
      multIndex: this.data.currentMultIndex
    })
  }
})