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

hzc 发布于2019-08-30 13:17 / 531人阅读

摘要：如果有其他需求，比如返回例子中直接返回，可以修改中的代码，就不赘述了

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

html:




    
    
    下一页    
    
    
    
    
    


    
    
    
        已经加载的1-1
        已经加载的1-2
        已经加载的1-3
        已经加载的1-4
        已经加载的1-5

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中的代码，就不赘述了~

云服务器 GPU云服务器发一个分页的js asp分页的一个类 php 下一页的代码移动端翻页插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115440.html

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

摘要：如果有其他需求，比如返回例子中直接返回，可以修改中的代码，就不赘述了今天在技术群看到有朋友有需求，就随手写了一个，大家随便看看~demo地址：http://www.dtzhuanjia.com/pri...（备注：这个主要用在移动端，所以用rem随便写了写样式= =PC看着不舒服用模拟器看吧） html: 下一页 ...

heartFollower 2019-08-21 11:25 评论0 收藏0
分享一个移动端滑到底部翻页的代码

摘要：如果有其他需求，比如返回例子中直接返回，可以修改中的代码，就不赘述了今天在技术群看到有朋友有需求，就随手写了一个，大家随便看看~demo地址：http://www.dtzhuanjia.com/pri...（备注：这个主要用在移动端，所以用rem随便写了写样式= =PC看着不舒服用模拟器看吧） html: 下一页 ...

kumfo 2019-08-01 16:09 评论0 收藏0
手机端滑屏翻页，页面元素动画

摘要：引入文件页面结构控制翻屏逻辑直接跳到第页设置滑动页面的统一样式引入touch.js文件 // Zepto.js // (c) 2010-2014 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($){ var touch = {...

YancyYe 2019-08-21 17:39 评论0 收藏0
随手记 - 疯狂触发滚轮事件的Mac触控板

摘要：这个来的莫名其妙，问了一圈人也没什么思路，后来自己上网搜，在一个页面上找到一段关于的触控板的手势滑动会疯狂触发滚轮事件的记录，但是轮到具体的解决方案就语焉不详了。头几天官网刚上线，就接到投诉说有问题。过去一看，我靠什么鬼？！Mac下用触控板一滑到底，——首页上用iscroll写的翻页效果直接全军覆没。这个bug来的莫名其妙，问了一圈人也没什么思路，后来自己上网搜，在一个页面上找到一...

RobinTang 2019-08-20 14:22 评论0 收藏0
知乎快捷取消我关注的问题chrome插件

摘要：起因昨天上知乎一看，发现自己关注的问题接近个了，不能忍，希望控制在个以以内最好是个以内。到问题详情页分析取消关注的格式，使用问题拼装。功能说明把所有关注的问题列出来。而实际上知乎显示我关注的问题有个。知乎的列表的结构和接口都可能会修改。起因昨天上知乎一看，发现自己关注的问题接近1000个了，不能忍，希望控制在500个以以内最好是100个以内。于是打开我关注的问题列表。发现这个列表已...

PAMPANG 2019-08-22 13:56 评论0 收藏0