联动picker组件

从不联动组件到今天，很久没发布文章了，一方面是过年，一方面是没有静下来好好写完联动的picker组件。数据处理断断续续理了好几天，到今天才完善，还有是因为zed帮忙做了点还帮忙发布了npm。

联动其实跟没联动思路一样的，只是把联动的数据处理成不联动的，只是另外要加一些改变。

首先是数据格式：

[{

value: '一列1',

data: [{

value: '二列1',

data: [{

value: '三列1'

}]

}]

},

{

value: '一列2',

data: [{

value: '二列2',

data: [{

value: '三列00'

}]

}, {

value: '二列2',

data: [{

value: '三列11'

}]

}]

},

{

value: '一列3',

data: [{

value: '二列3'

}]

},

{

value: '一列4',

data: [{

value: '二列4',

data: [{

value: '三列4',

}]

}]

},

]
复制代码

初始化的时候我先处理出第一个数组，默认选中的都是0，然后根据第一个得到联动的数据json。第一列变，之后的都要初始化为0，第二列变，第二列之后的要变成0，使用递归构造出数组：

当我们第一列改变的时候，第二列开始往下都要滚动到0的位置，以此类推，需要加一个循环：

然后样式做了一些修改，在IOS上面滚动会卡，加个属性：

-webkit-overflow-scrolling: touch;

另外因为省市区有些地名太长了，就给超出省略了。最后就是返回的数组是选中的value，不是index。如果想要禁止滚动穿透，可以使用这个包里面function里面的disableScroll方法，引入之后在mounted禁止，然后destroy的时候允许滚动。

在pickerLink下附带了省市区数据，需要的可以使用。

效果：

其实还是希望想要使用的可以下载下来之后自己修改自己想要的效果，真的都不难。已经发布npm:

www.npmjs.com/package/wad…

欢迎关注Coding个人笔记公众号

转载于:https://juejin.im/post/5c6aadc7e51d454bd34e16bc