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');
    });
  • 相关阅读:
    课程设计之第一次冲刺---第三天(11.13-11.14)
    课程设计之第一次冲刺---第二天(11.12)
    课程设计之第一阶段冲刺---第一天(11.11)
    团队贡献分分配
    尸体解剖
    回答自己的提问
    第三阶段冲刺--第2天
    第三阶段冲刺--第1天
    对其他组评价的反馈
    《一个程序猿的生命周期》读后感
  • 原文地址:https://www.cnblogs.com/tc-jieke/p/9242158.html
Copyright © 2011-2022 走看看