mpvue的二级联动选择

最近在使用mpvue开发一个小程序,试试效果怎么样,在遇到使用mpvue做二级联动时遇到点坑,记录一下
来波效果图

mpvue二级联动.gif

先说一下这里的坑吧,首先最简单的,需要使用"multiSelector"来制作多列联动,具体可查看小程序picker的使用;然后就是在mpvue面不能使用bind,都要改成@;columnchange代表列选择器,change代表触发确定按钮;小程序的列选择器是这种模式的:[ [第一列的数据] , [第二列的数据] ],所以我们使用的时候要用columnchange动态监听,当滚动第一栏的时候,根据第一栏的内容,获取到所对应的第二栏的数据;然后我发现了一个最大的坑:就是你如果不在picker里面添加其他的数据渲染的话,使用columnchange进行列表改变,列表的数据是变了,但是不会渲染出来,所以我这边将数据改变之后,添加了一个当前选择的渲染,这样第二列的数据才会改变







你可能感兴趣的:(mpvue的二级联动选择)