zoukankan      html  css  js  c++  java
  • Iscroll应用文档

    Iscroll是一个非常不错的区域滑动插件。

    不过它有个小小的不足,就是它的说明文档。

    全英文不说,整理的也不咋好,官网上看着很乱,不容易查阅。

    因此上网找了一些相关的文档说明并加以整理。

    Iscroll 提供的调用方法

    destroy 
    顾名思义,是用来销毁你实例化的iScroll 实例,包括之前绑定的所有iscroll 事件。 

    refresh 
    这个方法非常有用,当你的滚动区域的内容发生改变 或是 滚动区域不正确,都用通过调用refresh 来使得iscroll 重新计算滚动的区域,包括滚动条,来使得iscroll 适合当前的dom。 

    scrollTo 
    这个方法接受4个参数 xytimerelative x 为移动的x轴坐标,y为移动的y轴坐标, time为移动时间,relative表示是否相对当前位置。 

    scrollToElement 
    这个方法实际上是对scrollTo的进一步封装,接受两个参数(el,time),el为需要滚动到的元素引用,time为滚动时间。 

    scrollToPage 
    此方法接受三个参数(pageX,pageY,time) 当滚动内容的高宽大于滚动范围时,iscroll 会自动分页,然后就能使用scrollToPage方法滚动到页面。当然,当hscroll 为false 的时候,不能左右滚动。pageX这个参数就失去效果 

    disable 
    调用这个方法会立即停止动画滚动,并且把滚动位置还原成0,取消绑定touchmove, touchend、touchcancel事件。 

    enable 
    调用这个方法,使得iscroll恢复默认正常状态 

    stop 
    立即停止动画 

    zoom 
    改变内容的大小倍数,此方法接受4个参数,x,y,scale,time 分别表示的意思为,放大的基准坐标,以及放大倍数,动画时间 

    isReady 
    当iscroll 没有处于正在滚动,没有移动过,没有改变大小时,此值为true

    Iscroll 的初始化属性

    hScroll: true, //是否水平滚动
    vScroll: true, //是否垂直滚动
    x: 0, //滚动水平初始位置
    y: 0, //滚动垂直初始位置
    snap: true, //值可以为true或是DOM元素的tagname,当为true时,对齐的坐标会根据可滚动的位置和滚动区域计算得到可滑动几页,如果为tagname,则滑动会对齐到元素上
    bounce: true, //是否超过实际位置反弹
    bounceLock: false, //当内容少于滚动是否可以反弹,这个实际用处不大
    momentum: true, //动量效果,拖动惯性
    lockDirection: true, //当水平滚动和垂直滚动同时生效时,当拖动开始是否锁定另一边的拖动
    useTransform: true, //是否使用CSS形变
    useTransition: false, //是否使用CSS变换
    topOffset: 0, //已经滚动的基准值(一般情况用不到)
    checkDOMChanges: false, //是否自动检测内容变化(这个检测不是很准)
    
    //Scrollbar相关参数,通过scrollbar这些参数可以配置iscroll的滚动条,通过scrollbarClass可以自己定义一套滚动条的样式。
    hScrollbar: true, //是否显示水平滚动条
    vScrollbar: true, //同上垂直滚动条
    fixedScrollbar: isAndroid, //对andriod的fixed
    hideScrollbar: isIDevice, //是否隐藏滚动条
    fadeScrollbar: isIDevice && has3d, //滚动条是否渐隐渐显
    scrollbarClass: '', //自定义滚动条的样式名
    
    //Zoom放大相关的参数,通过它,对于一个固定显示图片区域的类似应用,可以非常简单的做到固定滚动,包括两指放大的应用。
    zoom: false, //默认是否放大
    zoomMin: 1, //放大的最小倍数
    zoomMax: 4, //最大倍数
    doubleTapZoom: 2, //双触放大几倍
    wheelAction: 'scroll', //鼠标滚动行为(还可以是zoom)
    
    //自定义Events相关参数 
    onRefresh: null, //refresh 的回调,关于自身何时调用refresh 后面会继续谈到
    onBeforeScrollStart: function(e){ e.preventDefault(); }, //开始滚动前的时间回调,默认是阻止浏览器默认行为
    onScrollStart: null, //开始滚动的回调
    onBeforeScrollMove: null, //在内容移动前的回调
    onScrollMove: null, //内容移动的回调
    onBeforeScrollEnd: null, //在滚动结束前的回调
    onScrollEnd: null, //在滚动完成后的回调
    onTouchEnd: null, //手离开屏幕后的回调
    onDestroy: null, //销毁实例的回调
    onZoomStart: null, //开始放大前的回调
    onZoom: null, //放大的回调
    onZoomEnd: null //放大完成后的回调
  • 相关阅读:
    [Algorithm] Delete a node from Binary Search Tree
    [Javascript] Check both prop exists and value is valid
    对象的多态性
    spring 定时任务(3)--配置多个定时任务
    能上QQ无法打开网页
    [置顶] Ajax核心--XMLHttpRequest对象
    linux内核--进程地址空间(一)
    [SQL]一个删选数据的例子,使用GROUP、DISTINCT
    [置顶] 腾讯2014软件开发笔试题目
    DBS小结
  • 原文地址:https://www.cnblogs.com/czf-zone/p/3263577.html
Copyright © 2011-2022 走看看