微信小程序自定义多栏选择器使用详情

首先，预览

微信小程序在自己的表单组件中加入选择器选择器，给出常用的时间和省市三级联动选择器。但是，这些选择器不可能只在日常开发中使用，所以我们首先编写一个通用的自定义选择器来满足项目的日常需求。首先给出渲染图：(首先声明选择器中的数据用于测试，与真实情况无关)

第二，选取器属性

简单的多列选择器只需要向选择器组件添加属性模式=“多选”。绑定数据时，使用range将数组绑定为显示内容。以下是官方属性解释。

第三，创建组件

我们可以首先在。wxml:

选取器模式=' MultiSelector ' bind change=' BindcustomPickerChange ' bind columnChange=' BindcustomPickerColumnChange '值='{{customIndex}}范围=' { { onlyArray } } '查看多列自制选择器：{ { OnlArray[0][自定义索引[0]]}}，{ { OnlArray[1][自定义索引[1]]}，{ { OnlArray[2][自定义索引[2]]}/。

第四，用户定义的功能

编写完组件后，我们将编写js文件。想法如下：

1.首先创建页面所需的数据

page({/* * * page的初始数据*/data: {//当前选定数组customindex3360的下标值[0，0，0]，//当前选定数组only array 3360[[]，[]，[]]，//习惯光线假定为从后台获取的json数据：习惯光线： [{ name:' Baidu '，dept 3360[{ name : ' search '，product :[{ name : ' Baidu search{name: '百度一次' }，] }，{name: '团购'，product: [{ name: '百度糯米' }，{name3360 '饿了么' } }，{ name: '音乐'，Product3360 [{name: '百度音乐' }] }，{name: '问答社区'，product: [{name3360 '百度贴吧' }]]Product: [{ name:' QQ' }，{ name: '微信' }，]}，{Name3360 '视频'，产品3360 [{ name: '腾讯视频' }，{name: '搜狐视频' }，]}，{Name: '短视频'，产品： [{ name: '微视' }]}，]，}，2。加载页面时给出赋值函数。

可以看到，当前选中的array onlyArray为空，在小程序显示时会直接显示为空，所以在创建页面时需要给出一个初始值，这个初始值是使用customIndex数组给出的，也可以用于页面数据回填。代码如下：

/* * *生命周期函数-监视页面加载*/onload:函数(选项){ var data={ habitray : this . data . habitray，customindex : this . data . customindex，only array : this . data . only array，}；for(var I=0；i .习惯法. length；i ) { data.onlyArray[0]。push(data .习惯法[i])。姓名)；} for(var j=0；j data .习惯法[data . customindex[0]]. dept . length；j ) { data.onlyArray[1]。push(data .习惯法[data.customIndex[0]]。部门[j]。姓名)；} for(var k=0；k data .习惯法[data.customIndex[0]]。dept[data . customindex[1]]. product . length；k ) { data.onlyArray[2]。push(data .习惯法[data.customIndex[0]]。dept[data.customIndex[1]]。产品[k]。姓名)；} this.setData(数据)；},3.创建组件侦听器函数。

这里需要两个函数，分别是bindchange(打开组件后点击确定触发)和bindcolumnchange(打开组件后滑动列触发)。

//通过多列自定义选择器bindcustompickerchange :函数(e)改变值的方法{ var custom ray=this . data . custom ray，custom index=this . data . custom index，only array=this . data . only array；Console.log('选取器用值' e.detail.value '发送选择更改)；//这里，e.detail.value是当前选中列的下标值数组，如[0，1，0]console . log(' picker选择的最终值为：'，onlyarray [0] [customindex [0]]，onlyarray [1] [customindex [1]]，only array[2][this . setdata({ custom index : e . detail . value })}，//多列自创选择器bindcustomercolumnchange:函数(e) {var习惯法=this data。customIndex[e . detail . column]=e . detail . value；//console . log(only array)；var search column=()={ for(var I=0；I习惯上的光线长度；I){ var arr 1=[]；var arr 2=[]；if(I==customIndex[0]){ for(var j=0；j习惯性雷[i].部门长度；j ) { arr1.push(习惯法[i])。部门[j]。姓名)；if(j==customIndex[1]){ for(var k=0；k习惯雷[i]。dept[j]. product . length；k ) { arr2.push(习惯法[i])。部门[j]。产品[k]。姓名)；} only array[2]=arr 2；} } only array[1]=arr 1；} };} switch(e . detail . column){ case 0: customIndex[1]=0；customIndex[2]=0；search column()；打破；案例1: customIndex[2]=0；search column()；打破；} this . setdata({ only array : only array，customIndex : customIndex })；}，需要注意的是：

1).bindchange和bindcolumnchange都是eventhandle类型，但它们的绑定数据不同。

bindchange函数的值是所有当前选定列的下标值的数组，例如，[0，1，0]代表当前选择器的三列数据的下标；bindcolumnchange函数的E.detail.column代表当前选中的列，e.detail.value是当前选中列数据的下标，是一个数字。2)在bindcolumnchange函数中，判断e.detail.column，

如果e.detail.column==0，则表示第一列的数据发生了变化。此时第二列和第三列的所有数据下标都要设置为0，即设置为默认数据，联动改变onlyArray数组；如果e.detail.column==1，则表示第二列的数据发生了变化。此时，第三列的数据索引设置为0，onlyArray数组联动变化；如果e.detail.column==2，则表示第三列的数据发生了变化，但前两列不需要变化，所以这种情况下不需要判断数组变化。3).单击确定后，调用bindchange方法获取选择结果。我们能得到的数据包括两部分，

一个是所有当前选中列的下标值数组，即customIndex，在回填数据时使用；第二，当前选中的内容，我们用customIndex中的下标在onlyArray数组中找到具体的内容得到具体的值，例如‘百度，搜索，百度一次’。五.遇到的问题

这里有一只虫子。如果将customIndex[0]或customIndex[1]设置为0的语句放在switch语句的searchColumn()之后，数组显示将会混乱，如图所示：

也就是说，当第一列改变时，如果第二列数据的索引不是0，则第三列数据不能匹配。

根据上面的bug描述，我猜测这个问题可能是开关判断中数组变化的方法之后，将最后一列的数据索引设置为0的操作导致的。

因此，将customIndex[0]或customIndex[1]设置为0的语句放在searchColumn()之前是为了解决这个问题。

不及物动词摘要

这时候我们的自定义多列选择器就搭建好了，用json数据作为总数据，这样我们就可以自定义选项，得到想要的两部分数据，然后回填数据，基本满足了项目的实际需求。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。