微信小程序自定义多列选择器使用详解(2)

如果e.detail.column == 0,则代表改变的是第一列的数据,此时要将第二列和第三列的数据下标全部置为0,即置为缺省数据,并将onlyArray数组进行联动变化;

如果e.detail.column ==1,则代表改变的是第二列的数据,此时将第三列的数据下标置为0,将onlyArray数组进行联动变化;

如果e.detail.column ==2,则代表改变的是第三列的数据,而前两列不需要进行变化,故不需要判断这种情况的数组变化。

3).点击确定后,调用bindchange方法得到选择结果。我们可以得到的数据包括两部分,

一是当前选择的所有列的下标值数组,即customIndex,数据回填时即使用这部分数据;

二是当前选择的内容,我们用customIndex中的下标查找onlyArray数组中的具体内容得到具体值,例如 " 百度,搜索,百度一下 "。

五、遇到的问题

在这里遇到一个bug,如果在switch语句中将customIndex[0]或customIndex[1]置为0的语句放在searchColumn()后边时,数组显示会混乱,如图所示:

微信小程序自定义多列选择器使用详解

即第一列换列时,如果第二列数据下标非0,则第三列数据无法对应上。

根据上述bug描述,我猜想可能是在switch判断中将后列数据下标置为0的操作晚于数组变化的的方法才会导致此问题。

所以后来将customIndex[0]或customIndex[1]置为0的语句放在searchColumn()前才解决了此问题。

六、总结

此时我们的自定义多列选择器就建好了,使用json数据作为总数据,可以自定义选项,可以得到想要的两部分数据,可以数据回填,基本满足了项目中的实际需要。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/da5121948e70d8b995da765bc8ab0cd4.html