成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

分享一個(gè)移動(dòng)端滑到底部翻頁(yè)的代碼

heartFollower / 936人閱讀

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

今天在技術(shù)群看到有朋友有需求，就隨手寫(xiě)了一個(gè)，大家隨便看看~
demo地址：http://www.dtzhuanjia.com/pri...
（備注：這個(gè)主要用在移動(dòng)端，所以用rem隨便寫(xiě)了寫(xiě)樣式= =PC看著不舒服用模擬器看吧）

html:




    
    
    下一頁(yè)    
    
    
    
    
    


    
    
    

        
已經(jīng)加載的1-1

        
已經(jīng)加載的1-2

        
已經(jīng)加載的1-3

        
已經(jīng)加載的1-4

        
已經(jīng)加載的1-5

js代碼：

function InitNextPage(obj){
    _this = this;
    _this.bottom = obj.bottom||10;//距離底部像素
    _this.target = obj.target||"body";//插入目標(biāo)源
    _this.url = obj.url||"none";//ajax請(qǐng)求的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",//插入目標(biāo)源
    url : "http://www.dtzhuanjia.com/private/plugin/nextpage/nextPage.php"http://ajax請(qǐng)求的url
})

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86692.html

相關(guān)文章

  • 分享一個(gè)移動(dòng)端滑到底部翻頁(yè)的代碼

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

    hzc 評(píng)論0 收藏0

  • 分享一個(gè)移動(dòng)端滑到底部翻頁(yè)的代碼

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

    kumfo 評(píng)論0 收藏0

  • 手機(jī)端滑屏翻頁(yè)，頁(yè)面元素動(dòng)畫(huà)

    摘要：引入文件頁(yè)面結(jié)構(gòu)控制翻屏邏輯直接跳到第頁(yè)設(shè)置滑動(dòng)頁(yè)面的統(tǒng)一樣式 引入touch.js文件 // Zepto.js // (c) 2010-2014 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($){ var touch = {...

    YancyYe 評(píng)論0 收藏0

  • 隨手記 - 瘋狂觸發(fā)滾輪事件的Mac觸控板

    摘要：這個(gè)來(lái)的莫名其妙，問(wèn)了一圈人也沒(méi)什么思路，后來(lái)自己上網(wǎng)搜，在一個(gè)頁(yè)面上找到一段關(guān)于的觸控板的手勢(shì)滑動(dòng)會(huì)瘋狂觸發(fā)滾輪事件的記錄，但是輪到具體的解決方案就語(yǔ)焉不詳了。 頭幾天官網(wǎng)剛上線，就接到投訴說(shuō)有問(wèn)題。過(guò)去一看，我靠什么鬼？！Mac下用觸控板一滑到底，——首頁(yè)上用iscroll寫(xiě)的翻頁(yè)效果直接全軍覆沒(méi)。 這個(gè)bug來(lái)的莫名其妙，問(wèn)了一圈人也沒(méi)什么思路，后來(lái)自己上網(wǎng)搜，在一個(gè)頁(yè)面上找到一...

    RobinTang 評(píng)論0 收藏0

  • 知乎快捷取消我關(guān)注的問(wèn)題chrome插件

    摘要：起因昨天上知乎一看，發(fā)現(xiàn)自己關(guān)注的問(wèn)題接近個(gè)了，不能忍，希望控制在個(gè)以以內(nèi)最好是個(gè)以內(nèi)。到問(wèn)題詳情頁(yè)分析取消關(guān)注的格式，使用問(wèn)題拼裝。功能說(shuō)明把所有關(guān)注的問(wèn)題列出來(lái)。而實(shí)際上知乎顯示我關(guān)注的問(wèn)題有個(gè)。知乎的列表的結(jié)構(gòu)和接口都可能會(huì)修改。 起因 昨天上知乎一看，發(fā)現(xiàn)自己關(guān)注的問(wèn)題接近1000個(gè)了，不能忍，希望控制在500個(gè)以以內(nèi)最好是100個(gè)以內(nèi)。于是打開(kāi)我關(guān)注的問(wèn)題列表。發(fā)現(xiàn)這個(gè)列表已...

    PAMPANG 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

heartFollower

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<