iscroll的实践

最新推荐文章于 2020-02-15 18:42:37 发布

原创最新推荐文章于 2020-02-15 18:42:37 发布 · 370 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iscroll

javascript 专栏收录该内容

54 篇文章

订阅专栏

1. iscroll的常用属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iscroll特性</title>
    <style>
        .wrap{
            width: 300px;
            height: 300px;
            background-color: #ccc;
            overflow: hidden;
            margin: 50px auto 0;
        }
        .content{
            width: 800px;
            height: 800px;
            background: -webkit-linear-gradient(left top,red,green);
        }
    </style>
    <script src="iscroll.js"></script>
    <script>
        window.onload = function () {
            let iscroll = new IScroll('.wrap',{
                bounce: true,   //是否允许回弹
                bounceTime: 300,    //回弹时间
                scrollX: false,   //横向拖动
                freeScroll: false,     //任意方向拖动
                startY: 100,    //默认起始位置
                mouseWheel: true,    //是否监听滚轮事件
                mouseWheelSpeed: 20,    //鼠标滚动速度
                momentum: false,    //是否开启物理引擎动画
                directionLockThreshold: 5,  //方向锁定阈值
                resizePolling: 60   //鼠标下拉刷新时间
            });
            console.log(iscroll.options);
        }
    </script>
</head>
<body>
<div class="wrap">
    <div class="content"></div>
</div>


</body>
</html>

2. iscroll常用事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iscroll事件</title>
    <style>
        .wrap{
            width: 300px;
            height: 300px;
            background-color: #ccc;
            overflow: hidden;
            margin: 50px auto 0;
        }
        .content{
            width: 800px;
            height: 800px;
            background: -webkit-linear-gradient(left top,red,green);
        }
    </style>
    <script src="iscroll-probe.js"></script>
    <script>
        window.onload = function () {
            let iscroll = new IScroll('.wrap',{probeType: 2});
            //用户点击屏幕，但是还未初始化滚动前
            iscroll.on("beforeScrollStart",function () {
                console.log("beforeScrollStart");
            });
            //开始滚动
            iscroll.on("scrollStart",function () {
                console.log("scrollStart");
            });
            //滚动中
            iscroll.on("scroll",function () {
                console.log("scroll");
            });
            //滚动结束
            iscroll.on("scrollEnd",function () {
                console.log("scrollEnd");
            });
            //初始化滚动后又取消
            iscroll.on("scrollCancel",function () {
                console.log("scrollCancel");
            });
        }
    </script>
</head>
<body>
<div class="wrap">
    <div class="content"></div>
</div>


</body>
</html>

3.iscroll下拉刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iscroll下拉刷新</title>
    <style>
        .wrap{
            width: 300px;
            height: 300px;
            background-color: #ccc;
            overflow: hidden;
            margin: 50px auto 0;
            position: relative;
        }
        .content{
            width: 800px;
            height: 800px;
            background: -webkit-linear-gradient(left top,red,green);
            position: relative;
            top: 0;
            z-index: 2;
        }
        .dropdown{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            text-align: center;
            line-height: 20px;
        }
    </style>
    <script src="iscroll-probe.js"></script>
    <script>
        window.onload = function () {
            let iscroll = new IScroll('.wrap',{probeType: 2});
            let dropdown = document.querySelector('.dropdown');
            let content = document.querySelector('.content');
            let scrollBeforeY = 0;
            iscroll.on('scrollStart',function () {
               scrollBeforeY = 0;
               content.style.transition = '';
            });
            iscroll.on("scroll",function () {
                if(iscroll.y > 50){
                    dropdown.innerHTML = '松开加载';
                }else{
                    dropdown.innerHTML = '下拉刷新';
                }
                scrollBeforeY = iscroll.y;
            });
            iscroll.on("scrollEnd",function () {
                if(scrollBeforeY > 100){
                    dropdown.innerHTML = '加载中...';
                    content.style.transition = '0.6s all ease';
                    content.style.marginTop = '30px';
                    setTimeout(function () {
                        dropdown.innerHTML = '加载完成';
                        setTimeout(function () {
                            content.style.marginTop = '0';
                        },500);

                    },3000);
                    console.log('刷新');
                }else{
                    console.log("不刷新");
                }
            })

        }
    </script>
</head>
<body>
<div class="wrap">
    <div class="content"></div>
    <div class="dropdown">
        下拉刷新
    </div>
</div>
</body>
</html>