小程序实现多列选择器(2)

其他参数容我吐槽下:首先是range--绑定的二维数据,只能是字符串组成的二维数组,比如[["a","b"], ["c","d"]],这样的话多列选择器就是第一列a,b选项,第二列c,d选项。感觉很美。然而事实上这能干啥捏?我们做的多列选择器并不是只是页面展示,要跟后台对接数据的,就这样传字符串合适否?我需要的是带id之类的对象,而wxml页面又不支持双括号绑定数据里写map之类的函数方法。所以,我们后台传过来的数据要改造一下,提取其中的name为绑定数据。

第二个就是value,本来以为这个是对应项中的第几个是这样的:a如果对应c,b如果对应d。选择bd应该就是[1, 1],而事实上是[1, 0]。也就是对应页面上展示的第几个对应(bd,页面上第一列有ab两个选项,第二列有且只有一个d)

其他关于bindchange绑定的方法是点击确认按钮触发,bindcolumnchange绑定的方法是滑动多列选择器时候触发,至于bindcancel绑定感觉就是笑话,数据实时改变,取消需要再绑定一个中间值才能达到该有的效果,这里暂时没有做。

js部分我使用了五个数据

objectMultiShow: []   选中带id的Object对象数组

objectMultiArray: []    后台带id,parentId对象数组

multiArray: []    微信小程序组件需求的字符串二维数组

multiIndex: []    微信小程序组件需求的选中对象数组

checkeIndex: []    基于bindcancel的中间值(暂时未做)

为了达到我想到的真正的多列效果,我不惜出卖肉体,跟后台大哥达成的各种屈辱协议,获得了想要的数据格式第一列数组不带parentId,因为没有parent。第二列parentId对应第一列id,第三列parentId对应第二列id,如果还有多,可以依次类推。然后根据需求,依次从中获取所需的其他数据,完成数据初始化。

然后在滑动多列选择器的时候,动态更新后一列的数据,我这里做的处理是更新后一列数据,并默认选择第一个选项。

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

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