专栏首页coding个人笔记无联动picker组件

无联动picker组件

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

最近看了同事写的省市区的组件,发现几乎所有的picker组件都是根据手指移动距离来滑动,但是有个问题,就是我快速的滑动一下,组件是没办法像原生scroll一样滑动一段距离。想要做这种效果想要计算手指在移动的那段时间内的速度,然后移动一段距离,就像一个小型的小引擎一样。

于是自己就想,直接用原生的scroll一样,快速滑动一下,能够自主的移动很长一段距离。本来想把联动和不联动的写成一个组件,后来发现针对联动和不联动,对于数据处理会比较麻烦,对用起来的时候要专门处理成组件需要的数据格式麻烦了,于是把联动和不联动的分开来写。

同样的,先说明原理:

布局“

仅支持最多5列,这边采用float布局,兼容性没问题。每一列都能够scroll。每一列的高度都是40,上下各有两个空白的li。

给每一列一个id,然后给每一列添加滚动监听,在滚动结束的时候获取scrollTop,然后把scrollTop变成40的整数倍。

滚动结束采用了节流的方法,也就是设定一个定时器去触发滚动结束。

我这边返回的是多少列就返回每一列的选中index,所以在改变选中状态的时候先判断当前是否跟之前选中的相同,不相同就改变选中index数组。

由于手指在滑动期间要禁止滚动的定时器,所以在start的时候设定一个状态,要是手指没有end就不触发scroll的定时器方法。

使用:

<w-pick :dataList="list"@confirm="confirm" @cancel="cancel" title="标题"></w-pick>

List的数据格式:

[
  [{value: '第三列'},{value:'第三列'},{value: '第三列'}],
  [{value: '第三列'},{value:'第三列'},{value: '第三列'}],
  [{value: '第三列'},{value:'第三列'},{value: '第三列'}],
  [{value: '第三列'},{value:'第三列'},{value: '第三列'}],
  [{value: '第三列'},{value:'第三列'},{value: '第三列'}]
]

效果:

因为是自己用,希望想要使用的可以研究透彻一下,这边还有很多没有实现,比如默认选中,每一列展示的数量等,有需要的可以留言,不过还是希望拷贝源码然后自己改成自己想要的。

已经发布npm:https://www.npmjs.com/package/wade-ui

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

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

原始发表时间:2019-01-31

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 联动picker组件

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

    wade
  • ES6之proxy

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

    wade
  • 字体图标iconfont

    前端开发离不开图标,会有一部分直接使用图片引进,但是在性能上来说对用户体验不是很好。

    wade
  • 抛开深层次底层,快速入门SpringMVC

    SpringMVC主要有三个核心部分组成,DispatcherServlet、Controller、ViewResolver。      Dispatche...

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

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

    美团技术团队
  • 高流量站点NGINX与PHP-fpm配置优化

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

    小小科
  • 排序算法-冒泡排序

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

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

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

    java乐园
  • 什么,你算出的P-value看上去像齐天大圣变的庙?

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

    生信宝典
  • 关于 python 中使用 lambda 表达式的问题

    --------------------------------  def doLambda(val):   print "value 2:", val ...

    田春峰-JCJC错别字检测

扫码关注云+社区

领取腾讯云代金券