IScroll 判断是否滚动到底部并加载更多数据

最新推荐文章于 2019-04-12 14:55:00 发布

徐同保

最新推荐文章于 2019-04-12 14:55:00 发布

阅读量2.1k

点赞数 1

分类专栏： web前端前端技术分享文章标签： IScroll

本文链接：https://blog.csdn.net/xutongbao/article/details/81986360

版权

web前端同时被 2 个专栏收录

735 篇文章 14 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

    <!DOCTYPE html>
    <html>
     
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>IScroll 判断是否滚动到底部并加载更多数据</title>
        <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
        }
     
        .wrapper {
            position: absolute;
            top: 0;
            bottom: 50px;
            right: 0;
            width: 200px;
            background: #f8f8f9;
        }
     
        .wrapper ul {
            margin: 0;
            padding: 0 10px;
        }
     
        .m-item {
            position: relative;
            height: 100px;
            border: 1px solid green;
            list-style: none
        }
     
        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background: #444;
        }
        .mCustomScrollBox{overflow: unset;}
        .mCSB_container{overflow: unset;}
        </style>
    </head>
     
    <body>
        <div id="wrapper" class="wrapper">
            <ul id="m-list">
            </ul>
        </div>
        <div class="footer"></div>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
        <script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll.js"></script>
        
        <script type="text/javascript">
        $(function() {
            var dom = {
                wrapper: $('#wrapper'),
                list: $('#m-list')
            };
            var html = '';
            for (var i = 0 ; i < 10; i++) {
                html += '<li class="m-item js-item">' + i + '</li>'
            }
            dom.list.html(html);    

            function scrollEndFn () {
                if (this.y - 200 < this.maxScrollY && (this.directionY === 1)) {
                    console.log('滚动到底部');
                    var html = '';
                    for (var i = 0 ; i < 10; i++) {
                        html += '<li class="m-item js-item">' + i + '</li>'
                    }
                    dom.list.append(html);  
                    if (myScroll) {
                        myScroll.refresh();
                    }                
                }
            }            
            myScroll = new IScroll('#wrapper', { 
                click: true,        //支持点击
                scrollbars: true,   //显示滚轮
                mouseWheel: true,   //鼠标滚轮可以滚动
                interactiveScrollbars:true,  //滚动条可以拖动
                preventDefault: false, //禁止阻止浏览器默认行为，可以选择文字             
            });
            myScroll.on('scrollEnd', scrollEndFn);                
        });
        </script>
    </body>
     
    </html>

徐同保

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
IScroll 判断是否滚动到底部并加载更多数据

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=width=device-width, user-scalable=no, initi
复制链接

扫一扫