分享一個移動端滑到底部翻頁的代碼

heartFollower 發布于2019-08-21 11:25 / 931人閱讀

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

今天在技術群看到有朋友有需求，就隨手寫了一個，大家隨便看看~
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"http://ajax請求的url
})

上面代碼中：
bottom是距離底部多少像素時執行ajax，默認10
target是執行成功后，像哪個dom插入返回的數據，默認為body
url是ajax url地址，必填。

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

云服務器 GPU云服務器發一個分頁的js asp分頁的一個類 php 下一頁的代碼移動端翻頁插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86692.html

分享一個移動端滑到底部翻頁的代碼

摘要：如果有其他需求，比如返回例子中直接返回，可以修改中的代碼，就不贅述了今天在技術群看到有朋友有需求，就隨手寫了一個，大家隨便看看~demo地址：http://www.dtzhuanjia.com/pri...（備注：這個主要用在移動端，所以用rem隨便寫了寫樣式= =PC看著不舒服用模擬器看吧） html: 下一頁 ...

hzc 2019-08-30 13:17 評論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