zoukankan      html  css  js  c++  java
  • 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;
                 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;
                 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>
  • 相关阅读:
    我的python菜鸟之路11
    我的SAS菜鸟之路9
    我的python菜鸟之路10
    idea中tomcat9打印日志乱码
    2、dockerfile命令
    1、Docker 打包本地镜像
    1、Centos7下MongoDB下载安装详细步骤
    4、自定义service 服务
    3、杀死某个服务下的多个进程
    3、python导出依赖环境时报错
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924818.html
Copyright © 2011-2022 走看看