zoukankan      html  css  js  c++  java
  • iscroll的基本方法


    // 创建滚动视图
    var myScroll = new IScroll('.content', {
    // bounceEasing: 'elastic', bounceTime: 1200

    //常用配置项
    //弹簧效果
    bounce: true,

    //打开点击事件
    //为了系统更优默认click事件为false,统一为滚动事件
    //如果想页面的点击事件和a标签链接生效的话必须让click和tap都设置为true;
    click: true,
    tap: true,

    //支持鼠标滚动
    mouseWheel: true,

    //显示滚动条
    scrollbars: true,
    //滚动条淡入淡出
    fadeScrollbars: true,

    //x,y轴是否可以滚动
    scrollX: true,
    scrollY: true,

    //自由滚动,精确手指的运动(X,Y轴都会偏移),值为false时只会根据X,Y轴谁偏移的多就向哪方滚
    freeScroll: true,

    //x,y轴设置起始位置
    startX: 0,
    startY: 0,

    //配置侦听滚动事件的方式(需要换成引入iscroll-probe.js)
    probeType: 3//可取值:1,2,3
    //1,scroll执行缓慢,惯性的滚动不执行
    //2,scroll执行较快,惯性的滚动不执行
    //3,scroll执行较快,惯性的滚动执行
    });


    function testAction(){
    //iscroll常用属性

    // myScroll.wrapper 滚动容器的dom对象
    // myScroll.scroller 滚动视图的dom对象

    //x,y轴最大滚动范围
    // myScroll.maxScrollX
    // myScroll.maxScrollY

    // 当前滚动视图所在位置
    // myScroll.x
    // myScroll.y

    console.log(myScroll);


    //iscroll常用的方法
    //滚动到指定的位置
    // myScroll.scrollTo(x, y, speed);
    // myScroll.scrollTo(0, -200, 500);
    //myScroll.scrollBy(0, -200, 500)每次都会走你设定的距离(数据会叠加)

    //更新滚动视图
    // myScroll.refresh();

    }




    // iscroll的滚动事件
    //滚动开始前
    myScroll.on('beforeScrollStart', function(){
    console.log('beforeScrollStart');
    });
    //滚动开始
    myScroll.on('scrollStart', function(){
    console.log('scrollStart');
    });
    //正在滚动
    myScroll.on('scroll', function(){
    console.log('scroll');

    });
    // 滚动停止
    myScroll.on('scrollEnd', function(){
    console.log('scrollEnd');
    });
    // 滚动取消,触发条件跟touchcancel一样(手机放弃活跃状态的时候,比如你收到短信)
    myScroll.on('scrollCancel', function(){
    console.log('scrollCancel');
    });
  • 相关阅读:
    PHP 标量类型与返回值类型声明
    如何使用 PHP 语言来编码和解码 JSON 对象
    mongodb的读写分离
    [FWT] UOJ #310. 【UNR #2】黎明前的巧克力
    drcom 不耍流氓
    drcom 不耍流氓
    Visual Studio 自定义项目模板
    Visual Studio 自定义项目模板
    Visual Studio 自定义项目模板
    【广告】win10 uwp 水印图床 含代码
  • 原文地址:https://www.cnblogs.com/tc-jieke/p/9242158.html
Copyright © 2011-2022 走看看