zoukankan      html  css  js  c++  java
  • iscroll简单使用说明

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

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

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

    目前有以下版本:

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

    使用方法:

    页面引用:

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

    HTML结构如下:

    1 <div id="wrapper">
    2     <ul>
    3         <li>...</li>
    4         <li>...</li>
    5         ...
    6     </ul>
    7 </div>

    JS初始化:

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

     iScroll配置参数说明:

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

    API:

    所属 方法名 说明
    滚动 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 ,节省资源
     

    事件使用:

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

    这个在微信中使用还是存在一些小问题,欢迎大家拍砖,共同交流探讨。
    喜欢H5,web开发的朋友可以加群:374166122

    请使用手机"扫一扫"x

  • 相关阅读:
    Python面向对象——内置对象的功能扩展
    学术日记#学术道德与人文素养
    Python面向对象——基本继承
    SqlServer——字符串处理函数
    SqlServer——索引
    生活小问题(1)
    win7-VS2010-IIS网站的发布问题
    PhoneGap+Cordova+SenchaTouch-01-环境搭建
    sql server数字转字符串出现科学计数法
    SQLServer 重启服务后,自增1的标识列一次增长了1000(转自博问)
  • 原文地址:https://www.cnblogs.com/ZHF/p/5941644.html
Copyright © 2011-2022 走看看