联动picker组件

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

首先是数据格式:

[{
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

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-02-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 无联动picker组件

    省市区联动这种插件应该很多人用过,在我第一次写这种功能的时候,第一时间就是找插件,尤其是移动端,对当时的我来说从来没有想过自己写。

    wade
  • node乞丐版require方法

    在node环境中,每一个文件都是一个模块,解决了命名冲突的问题,node会默认给js加上一个函数,比如一个js文件打印this:

    wade
  • ES6之proxy

    Proxy 这个东西,在开发的时候解决跨域使用过,翻译成代理器。Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(met...

    wade
  • 排序算法-冒泡排序

    排序算法-冒泡排序 <?php /** * 冒泡排序 * * @param array $value 待排序数组 * * @return array...

    琯琯
  • 高流量站点NGINX与PHP-fpm配置优化

    使用Nginx搭配PHP已有7年的这份经历让我们学会如何为高流量站点优化NGINX和PHP-fpm配置。 以下正是这方面的一些提示和建议: 1. 将TCP切换为...

    小小科
  • AppScan安全漏洞说明及解决方案

    解决方案:向所有会话cookie 添加HttpOnly属性 ,可以在过滤器中统一添加。

    java乐园
  • 大众点评App的短视频耗电量优化实战

    前言 美团点评测试团队负责App的质量保证工作,日常除了App的功能测试以外,还会重点关注App的性能测试。现在大家对手机越来越依赖,而上面各App的耗电量,直...

    美团技术团队
  • 什么,你算出的P-value看上去像齐天大圣变的庙?

    前几天,Nature上一篇comment再度引发关于p-value如何使用和解释的文章:Scientists rise up against statistic...

    生信宝典
  • lodash 是如何做类型检测的

    JS 的基本数据类型有 Number,String,Boolean,Symbol,Null,Undefined,六种数据类型。一种引用类型 object。

    Javanx
  • input文本框输入时正则判断

    Java帮帮

扫码关注云+社区

领取腾讯云代金券