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

2024年2月12日 90次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞