微信小程序picker组件实现多列选择器
【微信小程序】picker组件多列选择器的使用
功能需求
用微信小程序的多列选择器实现对一个树状结构图中的末节点的选择，要求选择器的第一列改变时，后面列的选项会联动改变。树状结构图的部分数据如下图;
图1 数据的树状结构图
效果预览
图2 多列选择器默认图
当选择“卡丘厂”后，后面的选项会联动改变:
图3 首列改变后的联动图
实现过程
1. WXML
下面我们进行详细的说明：
- range 是一个二维数组，用于存放打开多列选择器后显示的默认的数据信息，以图1中的树为例，默认的信息就是每层的第一个数组， 如下图红框所示。
<center>图5 range数组示例</center>
- value是一个是数组，数组长度与range的长度相同，每个元素的值对应着range中数组的下标，用于表示range数组里的第几个元素被选中。若被选中的是“皮卡丘厂-皮班组2-皮数据线21-皮传感量211”，则value=[1,1,0,0].
- bindchange是一个触发事件，value改变时触发该事件。该事件被触发时，通常是将value的值存到data中。
- bindcolumnchange是一个触发事件，列变时触发，修改的列为event.detail.column，（列数组的下标）值为e.detail.value。该事件被触发时，需要通过修改range的值来实现滑动选择器后的联动效果。
2. wxml示例
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" range="{{defaultarray}}" value="{{multiIndex}}">
已选中：{{defaultarray[0][multiIndex[0]]}}-{{defaultarray[1][multiIndex[1]]}}-{{defaultarray[2][multiIndex[2]]}}
</picker>
3. JS
js部分主要是上述提到的两个触发事件的编写。
首先先设置需要用到的变量。对图1所示的树，用array表示；range数组的变量名为defaultarray；value数组的变量名为multiIndex；
在onLoad中从array里提取defaultarray的数据；
在bindchange函数中，将改变了的value值setData到data中；
bindcolumnchange函数的逻辑比较复杂：
第一步，修改改变后的multiIndex的某一列对应的数值；
第二步，根据改变的列号分情况讨论，修改剩余的multiIndex列的数值，并且更改defaultarray的内容。分析如下：
如果改变的是第1列的数据(e.detail.column==0)，此时要将第二列及之后的列的数据下标全部置为0，即置为缺省数据，并将defaultarray数组进行联动变化；
改变第一列后，defaultarray联动变化的过程是：
保留defaultarray[0]的数组；
defaultarray[1]的数组变为array的multiIndex[0]的值对应的next1数组的title；
defaultarray[2]的数组变为array的multiIndex[0]的值对应的next1数组的[0]号的next2数组的title；
defaultarray[3]的数组变为array的multiIndex[0]的值对应的next1数组的[0]号的next2数组的[0]号的next3数组的title；
如果改变的是第2列的数据(e.detail.column==1)，此时要将第3列及之后的列的数据下标全部置为0，即置为缺省数据，并将defaultarray数组进行联动变化；
改变第2列后，defaultarray联动变化的过程是：
保留defaultarray[0]的数组；
保留defaultarray[1]的数组；
defaultarray[2]的数组变为array的multiIndex[1]的值对应的next1数组的[0]号的next2数组的title；
defaultarray[3]的数组变为array的multiIndex[1]的值对应的next1数组的[0]号的next2数组的[0]号的next3数组的title；
以此类推…
4. JS示例
data: {array: [{title: '皮卡丘厂',next1: [{title: '皮班组1',next2: [{title: '皮数据线1',next3: [{title: '皮传感量1'}, {title: '皮传感量2'}, {title: '皮传感量3'}, {title: '皮传感量4'}, {title: '皮传感量5'}]}, {title: '皮数据线2',next3: [{title: '皮传感量21'}, {title: '皮传感量22'}, {title: '皮传感量23'}, {title: '皮传感量24'}, {title: '皮传感量25'}]}, {title: '皮数据线3',next3: [{title: '皮传感量31'}, {title: '皮传感量32'}, {title: '皮传感量33'}, {title: '皮传感量34'}, {title: '皮传感量35'}]}]}, {title: '皮班组2',next2: [{title: '皮数据线21',next3: [{title: '皮传感量211'}, {title: '皮传感量212'}, {title: '皮传感量213'}, {title: '皮传感量214'}, {title: '皮传感量215'}]}, {title: '皮数据线22',next3: [{title: '皮传感量221'}, {title: '皮传感量222'}, {title: '皮传感量223'}]}, {title: '皮数据线23',next3: [{title: '皮传感量231'}, {title: '皮传感量232'}]}]}]}, {title: '卡丘厂',next1: [{title: '卡班组1',next2: [{title: '卡数据线1',next3: [{title: '卡传感量1'}, {title: '卡传感量2'}, {title: '卡传感量3'}, {title: '卡传感量4'}, {title: '卡传感量5'}]}, {title: '卡数据线2',next3: [{title: '卡传感量21'}, {title: '卡传感量22'}, {title: '卡传感量23'}, {title: '卡传感量24'}]}, {title: '卡数据线3',next3: [{title: '卡传感量31'}, {title: '卡传感量32'}, {title: '卡传感量33'}]}]}, {title: '卡班组2',next2: [{title: '卡数据线21',next3: [{title: '卡传感量211'}, {title: '卡传感量212'}]}, {title: '卡数据线22',next3: [{title: '卡传感量221'}, {title: '卡传感量222'}, {title: '卡传感量223'}]}, {title: '卡数据线23',next3: [{title: '卡传感量231'}, {title: '卡传感量232'}]}]}]}],defaultarray: [[],[],[],[]],multiIndex: [0, 0, 0, 0],},bindMultiPickerChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({multiIndex: e.detail.value})},bindMultiPickerColumnChange: function (e) {console.log('修改的列为', e.detail.column, '，（列下标）值为', e.detail.value);var that = this;var defaultarray = that.data.defaultarray,array = that.data.array,multiIndex = that.data.multiIndex// 更改multiIndexmultiIndex[e.detail.column] = e.detail.value// 联动变化defaultarray数组var searchColumn = () => {for (var i = 0; i < array.length; i++) {var arr1 = []; //defaultarray[1]var arr2 = []; //defaultarray[2]var arr3 = []; //defaultarray[3]if (i == multiIndex[0]) { //找到修改的列号ifor (var j = 0; j < array[i].next1.length; j++) {arr1.push(array[i].next1[j].title);if (j == multiIndex[1]) {for (var k = 0; k < array[i].next1[j].next2.length; k++) {arr2.push(array[i].next1[j].next2[k].title);if (k == multiIndex[2]) {for (var g = 0; g < array[i].next1[j].next2[k].next3.length; g++) {arr3.push(array[i].next1[j].next2[k].next3[g].title);}defaultarray[3] = arr3;}}defaultarray[2] = arr2;}}defaultarray[1] = arr1;}};}switch (e.detail.column) {case 0:multiIndex[1] = 0;multiIndex[2] = 0;multiIndex[3] = 0;searchColumn();break;case 1:multiIndex[2] = 0;multiIndex[3] = 0;searchColumn();break;case 2:multiIndex[3] = 0;searchColumn();break;}this.setData({defaultarray: defaultarray,multiIndex: multiIndex});},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;var defaultarray = that.data.defaultarrayvar array = that.data.array//给defaultarray里的第1个数组赋值for (var i = 0, len = array.length; i < len; i++) {defaultarray[0].push(array[i].title)}// 给defaultarray里的第2个数组赋值for (var i = 0, len = array[0].next1.length; i < len; i++) {defaultarray[1].push(array[0].next1[i].title)}// 给defaultarray里的第3个数组赋值for (var i = 0, len = array[0].next1[0].next2.length; i < len; i++) {defaultarray[2].push(array[0].next1[0].next2[i].title)}// 给defaultarray里的第4个数组赋值for (var i = 0, len = array[0].next1[0].next2[0].next3.length; i < len; i++) {defaultarray[3].push(array[0].next1[0].next2[0].next3[i].title)}// 渲染that.setData({defaultarray: defaultarray,})//！！！！！！！！要展示到界面的数据一定要用setdata!!!!!!!!!// that.data.defaultarray = defaultarrayconsole.log(defaultarray);console.log(that.data.defaultarray);},
参考文档
结束语
继续加油吧~
微信小程序picker组件实现多列选择器相关推荐
- 关于微信小程序picker之multiSelector多列选择器
文章目录 前言 使用步骤 1.wxml 2.读入数据 总结 前言 由于业务场景,需要使用自定义内容的多列选择器,自然而然选择了微信小程序官方提供的picker选择器,mode模式为multiSelec ...
- 微信小程序picker组件仅点击其中的内容才会触发事件
微信小程序包括picker组件在内的好多组件默认情况下只有点击其中的文字内容才可以触发相应的事件:例如下图的性别一栏,默认情况下只有点击红色区域的"男"字才能触发picker绑定的 ...
- 微信小程序picker组件
在小程序的开发应用中,我们会经常用到picker组件. 官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/picker.h ...
- 微信小程序picker组件 - 省市二级联动
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...
- 微信小程序picker 组件自定义三级联动
1.picker.wxml <!--pages/picker/picker.wxml--> <view><view class="section__title& ...
- 微信小程序picker组件 - 省市二级联动及其回显
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...
- 微信小程序多项选择器_微信小程序三级联动之多列选择器
有些时候,三级联动业务场景并不只是全国地区选择,可能还涉及到自定义分类的三级联动,这时就需要使用微信的多列选择器. 如果只是一列字段,或者每次拖动一次都去服务端取,会比较容易. 如果想一次定义好jso ...
- 微信小程序picker组件的确认，取消按钮方法
确定 bindchange 取消 bindcancel <picker mode="date" header-text="选择时间" f ...
- taro微信小程序时间组件picker的使用--省市区三级联动
微信小程序时间组件实现三级联动 项目技术手段支撑 taro+react+scss实现的微信小程序 Picker使用说明 相信大家在微信小程序开放文档里面已经学会了使用组件picker实现时间,和单列组 ...
最新文章
- 计算机基础-计算机硬件
- dwz(jui)刷新当前dialog的方法
- leetcode——344. 反转字符串
- sql行转列 列数据不定 sql交叉报表实例
- 基于实验数据的轮胎模型
- 关于React Hooks使用
- 中国省市JSON列表
- PowerApps关于试用环境
- html手机端富文本,移动端富文本踩坑
- Word 2003 视频教程(转)
- 迷宫小游戏Java实现
- onlyOffice常用api整理（1）
- android 仿iphone多任务管理效果,别羡慕苹果了，安卓悬浮神器比 iPhone 好用太多！...
- 数据库的学习MySQL
- python实现植物大战僵尸_Python开发植物大战僵尸游戏
- 数学图形(1.22) 蔓叶线
- fatal error LNK1104: 无法打开文件“opencv_calib3dXXXX.lib”
- 怎样把 PPT 做的像麦肯锡一样专业？
- 爱思服务器shsh文件类型,爱思助手SHSH怎么备份 爱思助手SHSH备份教程
- oracle是否支持gb18030,将oracle字符集改成GB18030