【小程序】多選和單選組件的封裝
阿新 • • 發佈:2018-08-15
代碼 下單 單選框 .text border event methods set ole
真正開發過小程序的開發者會發現,小程序裏面的單選框和多選框封封裝的實在不夠友好,一般與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
的內容。
小程序多選框在選中後會返回一個所選中的value的數組
checkboxIndexArr
,所以我們自定義的樣式需要通過判斷當前框的value
是不是在checkboxIndexArr
中(切記,checkboxIndexArr中的每個值的類型都是String),小程序在wxml中綁定方法時沒辦法攜帶參數的,所以需要需要將這個函數寫在wxs
中。如果需要有默認選中,需要單獨把默認選中的框的樣式激活,同時手動將默認選中的框的checked設置為
true
,並將其value
放入checkboxIndexArr
中。如果需要做全選和全不選,需要在放置一個變量
checked
,Boolean屬性,通過控制checked
開控制是否全選,但是,還是需要手動來添加和清空checkboxIndexArr
的內容。如果需要做反選功能,需要在數據中單獨設置一個控制是否選中的checked屬性,通過改變數據checked的值來改變多選框的選中效果,與上面一樣,還是要手動來添加和清空
checkboxIndexArr
的內容。
個人博客:午後南雜
【小程序】多選和單選組件的封裝