首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >联动picker组件

联动picker组件

作者头像
wade
发布2020-04-24 10:24:44
1.5K0
发布2020-04-24 10:24:44
举报
文章被收录于专栏:coding个人笔记coding个人笔记

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

首先是数据格式:

[{
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。如果想要禁止滚动穿透,可以使用disableScroll方法,引入之后在mounted禁止,然后destroy的时候允许滚动。

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

效果:

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

https://www.npmjs.com/package/wade-ui

(完)

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-02-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档