微信小程序在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;
}