学习滚动插件iScroll的简单使用

举报
zekelove 发表于 2021/10/21 11:42:26 2021/10/21
【摘要】 iScroll是一个高性能,资源占用少,无依赖,跨平台的javascript上拉加载,下拉刷新的滚动插件,可以处理用户进行移动交互的元素:滚动,缩放,平移,无限滚动,视差滚动,旋转等功能。

iScroll介绍

iScroll是一个高性能,资源占用少,无依赖,跨平台的javascript上拉加载,下拉刷新的滚动插件,目前版本v5.2.0。

GitHub下载地址:https://github.com/cubiq/iscroll

iScroll版本

iScroll进行了不同的优化,为了达到更高的性能,iScroll分为了多个版本,你可以根据项目选择最适合的版本。

目前有以下版本:

  • iscroll.js,这个版本是常规应用的脚本。它包含大多数常用的功能,有很高的性能和很小的体积。
  • iscroll-lite.js,精简版本。它不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案(这个能应付大多数场景)。
  • iscroll-probe.js,探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。(我正在做更多的测试,这可能最终在常规iscroll.js脚本,请留意)。
  • iscroll-zoom.js,在标准滚动功能上增加缩放功能。
  • iscroll-infinite.js,可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。

iScroll使用

页面引用

<script type="text/javascript" src="iscroll.js"></script>

HTML结构

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ......
        <li>...</li>
    </ul>
</div>

初始化脚本

<script type="text/javascript">
    var myScroll = new IScroll('#wrapper');
</script>

配置参数说明

var myScroll = new IScroll('#wrapper', {
    mouseWheel: true, //是否监听鼠标滚轮事件
    scrollbars: true,      //是否显示默认滚动条
    preventDefault: true,//是否屏蔽默认事件
    preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }, //列出哪些元素不屏蔽默认事件
    probeType: 3,//需要使用 iscroll-probe.js 才能生效 probeType : 1   滚动不繁忙的时候触发;probeType : 2   滚动时每隔一定时间触;probeType : 3   每滚动一像素触发一次

});

iScroll属性方法

功能 方法名 说明
滚动 scrollTo(x, y, time, easing) 滚动到: x , y ,事件, easing

方式

x:int

y:int

time:int

Easing: quadratic | circular | back | bounce | elastic

见 IScroll.utils.ease  对象

例:

myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);

滚动到相对于当前位置的某处 scrollBy(x, y, time, easing)  
滚动到某个元素 scrollToElement(el, time, offsetX, offsetY, easing) ;el:为必须的参数;offsetX/offsetY :相对于 el 元素的位移。设为 true 即为屏幕中心  
分割页面 snap goToPage(x, y, time, easing) 根据 options.snap 分割页面,跳转到横向、纵向某页。 XY 可以同时生效。 
next() prev() 上一页,下一页结合 options.snap使用
缩放 zoom(scale, x, y, time) 缩放容器Scale: 缩放因子
刷新 refresh() 刷新 IScroll
销毁 destroy() 销毁 IScroll ,节省资源

iScroll事件

beforeScrollStart 用户点击屏幕,但是还未初始化滚动前
scrollCancel 初始化滚动后又取消
scrollStart 开始滚动
scroll 滚动中
scrollEnd 滚动结束
flick 轻击屏幕左、右
zoomStart 开始缩放
zoomEnd 缩放结束

iScroll 可以处理用户进行移动交互的元素:滚动,缩放,平移,无限滚动,视差滚动,旋转等功能。

文章内容如果写的存在问题欢迎留言指出,让我们共同交流,共同探讨,共同进步~~~

文章如果对你有帮助,动动你的小手点个赞,鼓励一下,给我前行的动力。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200