【小程序】多選和單選組件的封裝

真正開發太小程序的開發者會發現，小程序裏面的單選框和多選框封封裝的實在不夠友好，通常與UI都會有比較大的出入，因此下面來探討一下單選框和多選框的封裝。

效果

好比咱們要作一個這種樣式的單選框和多選框組件，咱們改怎麼去處理呢？

代碼

wxml

<!-- 判斷某個元素是否是指定數組內 -->
<wxs module="checkbox">
  var checkStatus = function (arr, item) {
    return arr.indexOf(item) >= 0
  };

  module.exports.checkStatus = checkStatus;
</wxs>

<view hidden='{{isHidden}}'>
  <!-- 單選組件 -->
  <radio-group 
    class="radio-group" 
    bindchange="radioChange" 
    wx:if="{{selectType == 'radio'}}">
    <label 
      class='{{radioIndex == item.index ? focusRadioClass : initRadioClass}}' 
      wx:for="{{radioData}}" 
      wx:key="{{index}}"
      id="{{item.index}}">
      <view class='item-index'>
        <radio 
          style='opacity: 0' 
          value="{{item.index}}" 
          checked="{{item.checked}}"/>
        <view class='index'>{{item.index}}</view>
      </view>
      <view class='flex-item text-center'>{{item.value}}</view>
    </label>
  </radio-group>
  <!-- 多選組件 -->
  <checkbox-group 
    class="checkbox-group" 
    bindchange="checkboxChange" 
    wx:if="{{selectType == 'checkbox'}}">
    <label 
      class='{{checkbox.checkStatus(checkboxIndexArr, item.index) ? focusCheckboxClass : initCheckboxClass}}' 
      wx:for="{{checkboxData}}"
      wx:key="{{index}}"
      id="{{item.index}}">
      <view class='item-index'>
        <checkbox 
          style='opacity: 0' 
          value="{{item.index}}" 
          checked="{{item.checked}}"
          disabled="{{checkboxIndexArr.length > maxLength - 1 && !checkbox.checkStatus(checkboxIndexArr, item.index)}}"/>
        <view class='index'>{{item.index}}</view>
      </view>
      <view class='flex-item text-center'>
        {{item.value}}
      </view>
    </label>
    <view>{{checkboxIndexArr.prototype}}</view>
  </checkbox-group>
</view>

wxss

.flex-wrapper {
  display: flex;
}
.flex-item {
  flex: 1;
}
.text-center {
  text-align: center;
}

.radio-group, .checkbox-group {
  margin: 0 auto;
  width: 490rpx;
}
.radio-group label, .checkbox-group label {
  margin-bottom: 50rpx; 
  height: 68rpx;
  line-height: 68rpx;
  border: 1rpx solid #000;
  border-radius: 10rpx;
  font-size: 30rpx;
  color: #000;
}
.radio-group label.active, .checkbox-group label.active {
  background-color: #fcc919;
}
.radio-group label .item-index, .checkbox-group label .item-index {
  position: relative;
  flex: 0 0 40rpx;
  margin: 0 0 0 20rpx;
  width: 40rpx;
  height: 68rpx;
}
.radio-group label .item-index .index, .checkbox-group label .item-index .index {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 40rpx;
  height: 40rpx;
  overflow: hidden;
  line-height: 40rpx;
  text-align: center;
  border-radius: 50%;
  background-color: #fff;
}

javascript

Component({
  // 組件的屬性列表
  properties: {
    selectType: {
      type: String,
      value: 'checkbox'
    },
    radioData: {
      type: Array,
      value: []
    },
    checkboxData: {
      type: Array,
      value: []
    },
    isHidden: {
      type: Boolean,
      value: false
    },
    maxLength: {
      type: Number,
      value: 2
    }
  },
  // 組件的初始數據
  data: {
    initRadioClass: 'radio flex-wrapper flex-direction-row',
    focusRadioClass: 'radio flex-wrapper flex-direction-row active',
    initCheckboxClass: 'checkbox flex-wrapper flex-direction-row',
    focusCheckboxClass: 'checkbox flex-wrapper flex-direction-row active',
    radioIndex: null,
    checkboxIndexArr: []
  },
  // 組件的方法列表
  methods: {
    // radio選擇改變觸發的函數
    radioChange: function (e) {
      let value = e.detail.value;
      this.setData({
        radioIndex: value
      })

      this.triggerEvent('radioChange', value);
    },
    // checkbox選擇改變觸發的函數
    checkboxChange: function (e) {
      let value = e.detail.value;
      this.setData({
        checkboxIndexArr: value
      })

      this.triggerEvent('checkboxChange', value);
    }
  }
})

分析

其中，單選框比較簡單，重點在於多選框。其中比較坑的地方就是須要手動來控制 checkboxIndexArr 的內容。

1. 小程序多選框在選中後會返回一個所選中的value的數組 checkboxIndexArr ，因此咱們自定義的樣式須要經過判斷當前框的 value 是否是在 checkboxIndexArr 中（切記，checkboxIndexArr中的每一個值的類型都是String），小程序在wxml中綁定方法時沒辦法攜帶參數的，因此須要須要將這個函數寫在 wxs 中。

2. 若是須要有默認選中，須要單獨把默認選中的框的樣式激活，同時手動將默認選中的框的checked設置爲 true ，並將其 value 放入 checkboxIndexArr 中。

3. 若是須要作全選和全不選，須要在放置一個變量 checked ，Boolean屬性，經過控制 checked 開控制是否全選，可是，仍是須要手動來添加和清空 checkboxIndexArr 的內容。

4. 若是須要作反選功能，須要在數據中單獨設置一個控制是否選中的checked屬性，經過改變數據checked的值來改變多選框的選中效果，與上面同樣，仍是要手動來添加和清空 checkboxIndexArr 的內容。

我的博客：午後南雜