微信小程序在vant框架的基础上自定义多选框
1 简介
微信小程序官方和vant框架都没有提供很方便的多选框，所以自己定义一个组件
2 代码 select-checkbox
2.1 json
{"component": true,"usingComponents": {"van-field": "@vant/weapp/field/index","van-popup": "@vant/weapp/popup/index","van-cell": "@vant/weapp/cell/index","van-cell-group": "@vant/weapp/cell-group/index","van-checkbox": "@vant/weapp/checkbox/index","van-checkbox-group": "@vant/weapp/checkbox-group/index"}
}
2.2 wxss
.van-cell__value {text-align: left !important;
}
.cityheader {width: 100%;z-index: 5;
}
.city-cancel {float: left;margin: 20rpx;color: #969799;z-index: 11;position: relative;
}
.city-true {float: right;margin: 20rpx;color: #576b95;z-index: 11;position: relative;
}
2.3 wxml
2.3.1 代码
<view><van-field label="{{label}}" model:value="{{ checkSelected }}" placeholder="{{ place }}" border="{{ true }}" readonlyright-icon="{{icon}}" bindtap="showPopup" /><van-popup show="{{ show }}" bind:close="onClose" position="bottom" custom-style="height: 60%;overflow:hidden;padding:10rpx 0rpx;"><!-- 取消、确定按钮 --><view class="cityheader"><view bindtap="cancel" class="city-cancel">取消</view><view bindtap="confirm" class="city-true">确定</view></view><!-- 内容区域 --><van-checkbox-group value="{{ result }}" bind:change="onChange"><van-cell-group><van-cellwx:for="{{ list }}"wx:key="index"title="{{ item.label }}"value-class="value-class"clickabledata-index="{{ index }}"title-width="94%" centerbind:click="toggle"><van-checkboxcatch:tap="noop"label-position="right"class="checkboxes-{{ index }}"name="{{ item.ind }}"/></van-cell></van-cell-group></van-checkbox-group></van-popup>
</view>
2.3.2 说明
1）整体代码说明
分为两部分，van-field就是黄色框部分，就叫选择框。van-popup 下面的就是蓝色框部分，就叫选择面板。
2）选择面板代码van-cell说明
list：数据集合，格式：list: [{label:'黑翅土白蚁',value:'101',ind:'0'}, {label:'黄翅大白蚁',value:'102',ind:'1'}],
label：名称 value：value值 ind：数组的下标
title：选择面板展示的名称
3）选择面板代码van-checkbox说明
name：选中的值，这里采用的ind而不是value，因为获取到数组的下标，那么就可以从数字获取到对象，那么label和value值就都有了
3）选择面板van-checkbox-group代码说明
result：选择的值，数组格式,也就是上面的选择的ind的值的数组
2.4 js
2.4.1 代码
// pages/select-checkbox/select-checkbox.js
Component({/*** 组件的属性列表* list的格式 list: [{label:'黑翅土白蚁',value:'101',ind:'0'}, {label:'黄翅大白蚁',value:'102',ind:'1'}],* label：名称 value：value值 ind：数组下标*/properties: {label: String, // 输入框标签place: String, // 输入框提示list: Array, // 选择器 选项checkSelected: { // 选择器 选项数组中 对象的value的默认key
type: String,value: 'text'}},// 监听传入的变量,当传入的值发生变化时,触发方法// observers: {// 'checkSelected': function (val) {// // val=> 就是父组件传入组件中的 tabsList 数据// console.log('???:', val)// }// },/*** 页面的初始数据*/data: {icon:'arrow-down', // 下拉箭头show: false,result: [],values:[]},/*** 组件的方法列表*/methods: {// 取消
cancel() {this.setData({ show: false })},// 确定
confirm() {this.setData({ show: false })this.triggerEvent('sync', { // 传递到组件外事件 ， 返回当前选中项 对象value: this.data.values})},showPopup() {this.setData({ show: true })},onClose() {this.setData({ show: false })},onChange(event) {console.log('event:', event)var selectarr = event.detail // 选择的ind数组if(selectarr.length == 0){this.setData({result: [],values:[],checkSelected: ''})}else{var valuearr = [] // 选择的value数组var titlearr = [] // 选择的label数组，转换成字符串用于van-field处展示selectarr.forEach((point) => {var i = parseInt(point)console.log('point',i)console.log('properties.list[i]',this.properties.list[i])valuearr.push(this.properties.list[i].value)titlearr.push(this.properties.list[i].label)});}this.setData({result: selectarr,values:valuearr,checkSelected: titlearr.join(',')})console.log('this.data.checkSelected:', this.data.checkSelected)console.log('this.data.result:', this.data.result)console.log('this.data.values:', this.data.values)},toggle(event) {const { index } = event.currentTarget.datasetconst checkbox = this.selectComponent(`.checkboxes-${index}`)checkbox.toggle()},noop() {}, },attached: function () {console.log("父组件传过来:", this.properties.checkSelected) // 可以获取父组件传过来的值
},
})
2.4.2 说明
1） onChange
选择或取消选择的时候调用
这里event.detail获取到的是选择的ind数组，需要赋值给上面提到的result
获取到了ind数组
就可以获取到选择的对象label数组titlearr ,转换成字符串格式，赋值给checkSelected，用于van-field处展示
也可以获取到选择的对象的value数组valuearr ：用于返回给父组件
onChange(event) {console.log('event:', event)var selectarr = event.detail // 选择的ind数组if(selectarr.length == 0){this.setData({result: [],values:[],checkSelected: ''})}else{var valuearr = [] // 选择的value数组var titlearr = [] // 选择的label数组，转换成字符串用于van-field处展示selectarr.forEach((point) => {var i = parseInt(point)console.log('point',i)console.log('properties.list[i]',this.properties.list[i])valuearr.push(this.properties.list[i].value)titlearr.push(this.properties.list[i].label)});}this.setData({result: selectarr,values:valuearr,checkSelected: titlearr.join(',')})console.log('this.data.checkSelected:', this.data.checkSelected)console.log('this.data.result:', this.data.result)console.log('this.data.values:', this.data.values)},
3 使用
3.1 json引入
"select-checkbox": "/components/select-checkbox/select-checkbox"
3.2 wxml
<view class="search-tt2 ,require-label:before">多选: </view><view class="search-kk st"><select-checkbox style="width:100%" label="" title-width="70" place="请选择白蚁种类" list="{{ list }}" bind:sync="getSelectBox" checkSelected=""></select-checkbox></view>
3.3 js
data数据
checkSelected: '',list: [{label:'黑翅土白蚁',value:'101',ind:'0'}, {label:'黄翅大白蚁',value:'102',ind:'1'}],
回调函数
// 获取选中的值
getSelectBox: function(e) {// 打印选中项，就是选择的对象的value数组console.log("11111111:", e.detail.value)this.setData({checkSelected: e.detail.value})}
3.4 css
.search-tt2 {float: left;width: 180rpx;height: 80rpx;line-height: 80rpx;font-size: 32rpx;color: #333;margin-left: 70rpx; margin-top: 10px;
}.search-kk {width: calc(80% - 150rpx);height: 80rpx;border: 1px solid rgb(169, 167, 167);box-sizing: border-box;padding: 0 20rpx;line-height: 70rpx;font-size: 28rpx;color: #333;overflow-x: hidden;border-radius: 10rpx;
}.st {margin-top: 20rpx;
}
相关新闻
)
