iscroll上拉加载下拉刷新

最新推荐文章于 2023-04-15 10:02:13 发布

zbctrl

最新推荐文章于 2023-04-15 10:02:13 发布

阅读量2.1k

点赞数

分类专栏： javascript iscroll-js 文章标签： iscroll-js 上拉加载下拉刷新

本文链接：https://blog.csdn.net/zb_ctrl/article/details/78127516

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

iscroll-js

1 篇文章 0 订阅

订阅专栏

iScroll的产生完全是因为移动版webkit浏览器，例如在iPhone，Android 的移动设备上。
iScroll的原理是外层有一个溢出隐藏（overflow:hidden;）的DOM，然后这个区域内的第一个DOM结构会被实例化，其包裹的内容可以纵向或者横向的滚动，所以在使用iScroll的时候，滚动元素要尽量的简单，减少DOM个数，减少嵌套，因为DOM结构越是复杂iScroll运行起来就越是吃力，有可能会造成某些节点显示不正常的情况。所以，推荐使用的DOM结构如下：

<div id="wrapper">//overflow:hidden;
    <ul>
    //只有第一个DOM结构（ul）被实例化，这个DOM可以纵向或者横向的滚动，
    //多出的内容会被wrapper的样式hidden。
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

注意：再次重申，只有wrapper里的第一个子元素（ul）才可以被实例化滚动，并且要结合外层的DOM（wrapper）才能实现滚动。

iscroll上拉加载下拉刷新

附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <style type="text/css">
        html,body{
            height:100%;
        }
        html,body,div,ul,li{
            padding: 0;
            margin: 0;
        }
        ul,li{
            list-style-type: none;
        }
        #wrapper{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: auto;
            -webkit-overflow-scrolling:touch;
        }
        #scroller {
            position:relative;
            -webkit-tap-highlight-color:rgba(0,0,0,0);

            float:left;
            width:100%;
            padding:0;
        }

        #scroller ul {
            position:relative;
            list-style:none;
            padding:0;
            margin:0;
            width:100%;
            text-align:left;
        }

        #scroller li {
            padding:0 10px;
            height:40px;
            line-height:40px;
            border-bottom:1px solid #ccc;
            border-top:1px solid #fff;
            background-color:#fafafa;
            font-size:14px;
        }

        #scroller li > a {
            display:block;
        }

        /**
         *
         * 下拉样式 Pull down styles
         *
         */
        #pullDown, #pullUp {
            background:#fff;
            height:40px;
            line-height:40px;
            padding:5px 10px;
            border-bottom:1px solid #ccc;
            font-weight:bold;
            font-size:14px;
            color:#888;
        }
        #pullDown .pullDownIcon, #pullUp .pullUpIcon  {
            display:block; float:left;
            width:40px; height:40px;
            /*background:url(pull-icon@2x.png) 0 0 no-repeat;*/
            -webkit-background-size:40px 80px; background-size:40px 80px;
            -webkit-transition-property:-webkit-transform;
            -webkit-transition-duration:250ms;  
        }
        #pullDown .pullDownIcon {
            -webkit-transform:rotate(0deg) translateZ(0);
        }
        #pullUp .pullUpIcon  {
            -webkit-transform:rotate(-180deg) translateZ(0);
        }


        /**
         * 动画效果css3代码
         */
        #pullDown.flip .pullDownIcon {
            -webkit-transform:rotate(-180deg) translateZ(0);
        }

        #pullUp.flip .pullUpIcon {
            -webkit-transform:rotate(0deg) translateZ(0);
        }

    </style>
</head>
<body>
    <div id="wrapper">
        <div id="scroller">

            <div id="pullDown">
                <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
            </div>

            <ul id="thelist">
                <li>数据 1</li>
                <li>数据 2</li>
                <li>数据 3</li>
                <li>数据 4</li>
                <li>数据 5</li>
                <li>数据 6</li>
                <li>数据 7</li>
                <li>数据 8</li>
                <li>数据 9</li>
                <li>数据 10</li>
                <li>数据 11</li>
                <li>数据 12</li>
                <li>数据 13</li>
                <li>数据 11</li>
                <li>数据 12</li>
                <li>数据 13</li>
                <li>数据 6</li>
                <li>数据 7</li>
                <li>数据 8</li>
                <li>数据 9</li>
                <li>数据 10</li>
                <li>数据 11</li>
                <li>数据 12</li>
                <li>数据 13</li>
                <li>数据 11</li>
                <li>数据 12</li>
                <li>数据 13</li>
            </ul>

            <div id="pullUp">
                <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
            </div>

        </div>
    </div>
    <script type="text/javascript" src="../dist/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../dist/js/iscroll-probe.js"></script>
    <script type="text/javascript">
    $(function(){
        // 初始化并配置 iscroll
        var upFlag = false;
        var downFlag = false;
        var myScroll = new IScroll("#wrapper",{
            mouseWheel: true,
            bounch:true
        });
        // 滚动绑定事件
        myScroll.on("scrollEnd",function(){
            if(this.y <= this.maxScrollY && !upFlag){
                upFlag = true;
                setTimeout(function(){
                    $("#thelist").append("<li>上拉加载数据</li><li>上拉加载数据</li><li>上拉加载数据</li>");
                    myScroll.refresh();
                    upFlag = false;
                },1000);
            }
            if(this.y <= 0 && !downFlag){
                downFlag = true;
                setTimeout(function(){
                    $("#thelist").prepend("<li>下拉刷新</li>");
                    myScroll.refresh();
                    downFlag = false;
                },1000);
            }
        });
        // 这个scroll要在iscroll-probe.js中才有用，但是貌似没用，监听滚动
        myScroll.on("scroll",function(){

        });
    });

    </script>
</body>
</html>

zbctrl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
iscroll上拉加载下拉刷新

iScroll的产生完全是因为移动版webkit浏览器，例如在iPhone，Android 的移动设备上。 iScroll的原理是外层有一个溢出隐藏（overflow:hidden;）的DOM，然后这个区域内的第一个DOM结构会被实例化，其包裹的内容可以纵向或者横向的滚动，所以在使用iScroll的时候，滚动元素要尽量的简单，减少DOM个数，减少嵌套，因为DOM结构越是复杂iScroll运行起来就
复制链接

扫一扫