分享一个移动端滑到底部翻页的代码

2024年5月8日 158次阅读 来源: KissDuo

今天在技术群看到有朋友有需求，就随手写了一个，大家随便看看~
demo地址：http://www.dtzhuanjia.com/pri…
（备注：这个主要用在移动端，所以用rem随便写了写样式= =PC看着不舒服用模拟器看吧）

html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>下一页</title>    
    <meta name="Keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
    <link rel="stylesheet" href="http://www.dtzhuanjia.com/css/init.css">
    <link rel="stylesheet" href="http://www.dtzhuanjia.com/private/plugin/nextpage/index.css">
</head>
<body>
    <script src="http://www.dtzhuanjia.com/js/calrem.js"></script>
    <style>
    .block{width:100%;height:4rem;line-height:4rem; background:#ccc;text-align:center;font-size:1rem;color:#fff;border-bottom:}
    </style>
    <div class="main">
        <div class="block">已经加载的1-1</div>
        <div class="block">已经加载的1-2</div>
        <div class="block">已经加载的1-3</div>
        <div class="block">已经加载的1-4</div>
        <div class="block">已经加载的1-5</div>
    </div>
    
    <script src="http://www.dtzhuanjia.com/js/basic/jquery.js"></script>
    <script src="http://www.dtzhuanjia.com/private/plugin/nextpage/index.js"></script>
    <script>
    $(document).ready(function(){
        var initNextPage = new InitNextPage({
            bottom : 20,//距离底部像素
            target : ".main",//插入目标源
            url : "http://www.dtzhuanjia.com/private/plugin/nextpage/nextPage.php"//ajax请求的url
        })
    });
    </script>
</body>
</html>

js代码：

function InitNextPage(obj){
    _this = this;
    _this.bottom = obj.bottom||10;//距离底部像素
    _this.target = obj.target||"body";//插入目标源
    _this.url = obj.url||"none";//ajax请求的url
    _this.page = 2;
    //滑到底
    $(window).scroll(function(){
        _this.scrollToBottom();
    });    
}
InitNextPage.prototype = {
    scrollToBottom : function(){
        if($(window).scrollTop()+$(window).height()>$(document).height()-_this.bottom){
            if(_this.url=="none"){
                alert("ajax url不能为空");
                return;
            }
            $.ajax({
                url : _this.url,
                async: false,
                data : {
                    page : _this.page,
                },
                success : function(data){
                    _this.page++;
                    $(_this.target).append(data);
                }
            });
        }
    }
}

备注：

var initNextPage = new InitNextPage({
    bottom : 20,//距离底部像素
    target : ".main",//插入目标源
    url : "http://www.dtzhuanjia.com/private/plugin/nextpage/nextPage.php"//ajax请求的url
})

上面代码中：
bottom是距离底部多少像素时执行ajax，默认10
target是执行成功后，像哪个dom插入返回的数据，默认为body
url是ajax url地址，必填。

如果有其他需求，比如返回json（例子中直接返回Html），可以修改success中的代码，就不赘述了~

    原文作者：KissDuo
    原文地址: https://segmentfault.com/a/1190000007946943
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞