简单typescript+rollup.js开发的上下滑动触发指定动作库cdd-scroller

darkbug 发布于2019-08-21 17:37 / 858人阅读

摘要：这是个移动端和端通用的检测滑动的库。即在滑块在一定范围内到达顶部或者打到底部，亦或者二者均可的触发指定函数。离开触顶触底触发函数。集成节流阀，可设置频率，提高性能。默认值等于节流阀模式。防抖减少频率节流阀的频率，默认为。

cdd-scroller

tags: scroller

这是个移动端和pc端通用的检测滑动的库。

传送门

npm

github

功能

触顶/触底的触发函数。
即：在滑块在一定范围内到达顶部或者打到底部，亦或者二者均可的触发指定函数。

离开触顶/触底触发函数。
有些情况我们不仅需要滑块触顶或者触底，在滑块离开二者的一定范围时也需要触发一些函数。

设置触顶/触底的阈值。

集成节流阀，可设置频率，提高性能。

用法

scroller({
    fElement:dom,
    threshold?:,
    arrived:,
    unarrived:,
    up?:,
    down?:,
    modal?:"debounce"/"throttle",
    frequency?:250
})

往 scroller中添加一个对象即可

fElement: 父元素对象

threshold: 默认的到达底部的阈值，比如默认值20，也就是说在到达底部的20px范围呢可触发arrived函数。

arrived:达到顶部或者底部的触发函数

unarrived:离开顶部或者底部的触发函数

up:阈值，如果设置则触发下拉到达顶部的函数（默认为null)

down:阈值，如果设置则为到达底部的阈值。（默认值等于threshold

modal:节流阀模式。debounce：防抖；throttle:减少频率;

frequency:节流阀的频率，默认为250。

例子

html





  
  
  
  Document
  




  

    
      项目_1
      项目_2
      项目_3
      项目_4
      项目_5
      项目_6
      项目_7
      项目_8
      项目_9
      项目_10

GPU云服务器云服务器上下滑动 swipe上下滑动上下滑动js js上下滑动弹性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89781.html

用typescript开发手势库 - (1)web开发常用手势有哪些?

这只是个开头说在最前面,本文是一个系列文章的开头, 这个系列里我会讲如何用typescript开发一款支持pc和手机端的手势库any-touch, 以及通过jest让你的代码测试覆盖率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目录用TypeScript开发手势库 - (2)tsconfig.json & r...

raise_yang 2019-08-23 16:03 评论0 收藏0
Jquery就是这么简单

摘要：在内部还是调用这些方法。对象下标，从开始对象下标，从开始再次重申对象只能调用对象的，对象只能调用对象的对象转成值得注意的是在脚本内，是代表对象的。对象转成对象语法也非常简单在内写上对象，就变成了对象了。在文档中对它的解释是这样子的。什么是Jquery？ Jquey就是一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作就是封装了JavaScript，能够...

wpw 2019-08-30 14:04 评论0 收藏0
Jquery就是这么简单

摘要：在内部还是调用这些方法。对象下标，从开始对象下标，从开始再次重申对象只能调用对象的，对象只能调用对象的对象转成值得注意的是在脚本内，是代表对象的。对象转成对象语法也非常简单在内写上对象，就变成了对象了。在文档中对它的解释是这样子的。什么是Jquery？ Jquey就是一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作就是封装了JavaScript，能够...

oogh 2019-08-22 15:01 评论0 收藏0
[译]教程：如何使用Rollup打包样式文件并添加LiveReload

摘要：通过这个教程学习如何使用打包工具配合来取代或处理样式文件。使用这个命令安装插件更新。如果你没有项目的副本，你可以通过这条命令克隆在结束这个状态下的项目为添加监听插件。在代码块内，添加如下内容简单起见我省略了文件的大部分内容通过这个教程学习如何使用JavaScript打包工具Rollup配合PostCSS来取代Grunt或Gulp处理样式文件。上一篇文章中，我们完成了使用Rollup...

garfileo 2019-08-20 12:25 评论0 收藏0