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

    <!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>
IScroll 判断是否滚动到底部并加载更多数据

猜你喜欢
