成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

js實(shí)現(xiàn) web頁(yè)面的滾動(dòng)條下拉時(shí)加載更多

antyiwei / 3597人閱讀

摘要：一個(gè)更佳的方式是，當(dāng)滾動(dòng)條距離底部一定距離時(shí)，就動(dòng)態(tài)加載更多，向服務(wù)端請(qǐng)求資源。代碼總頁(yè)數(shù)當(dāng)前頁(yè)數(shù)滾動(dòng)條距離底部的距離沒(méi)有更多了分頁(yè)列表的接口相關(guān)參考頁(yè)面在滾動(dòng)條下拉時(shí)加載更多內(nèi)容個(gè)人項(xiàng)目經(jīng)驗(yàn)下拉加載更多實(shí)現(xiàn)監(jiān)聽(tīng)滾動(dòng)事件不執(zhí)行

js實(shí)現(xiàn) web頁(yè)面的滾動(dòng)條下拉時(shí)加載更多

在手機(jī)上，數(shù)據(jù)列表的分頁(yè)都是下拉到底部的時(shí)候會(huì)加載更多，但是，去年三月份的時(shí)候遇到了客戶要求web頁(yè)面也要下拉加載更多的需求，于是按照web頁(yè)面在滾動(dòng)條下拉時(shí)加載更多內(nèi)容（個(gè)人項(xiàng)目經(jīng)驗(yàn)）文中的代碼實(shí)現(xiàn)了這個(gè)下拉加載，很簡(jiǎn)單的，代碼如下：

var totalPages;//總頁(yè)數(shù)
var pageno = 0;//當(dāng)前頁(yè)數(shù)
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue == 0) {
           //do something
           if (pageno < totalPages - 1) {
               pageno++;
               doSomething(pageno);
           } else {
               alert("沒(méi)有更多了");
           }
       }
   });
);
 
function doSomething(pageno) {
        var url = "*******";//分頁(yè)列表的接口
        var data = {
                size: 5,
                start: pageno,
        };
        $.getJSON(url, data, function (rtn) {
                
        });
}

但是，今天測(cè)試人員發(fā)現(xiàn)，當(dāng)瀏覽器縮放了或者屏幕顯示設(shè)置縮放時(shí)，就不能下拉加載了。時(shí)隔一年多，真是驚人@_@

經(jīng)過(guò)調(diào)試，發(fā)現(xiàn)是有縮放時(shí)positionValue的值就無(wú)法等于0了，沒(méi)法繼續(xù)加載更多了，這時(shí)看到一篇文章下拉加載更多DEMO(js實(shí)現(xiàn))中講到：

如果等滾動(dòng)條拉到底部時(shí)再加載，會(huì)影響用戶體驗(yàn)。因?yàn)橐话銊?dòng)態(tài)加載的時(shí)候都需要向服務(wù)端請(qǐng)求資源，這時(shí)需要時(shí)間。一個(gè)更佳的方式是，當(dāng)滾動(dòng)條距離底部一定距離（C）時(shí)，就動(dòng)態(tài)加載更多，向服務(wù)端請(qǐng)求資源。也就是預(yù)加載，預(yù)讀取。公式如下
this.scrollHeight - C == $(this).scrollTop() + $(this).height()

看完后收到啟發(fā)，于是將positionValue的值設(shè)為大于等于-10，這里的10也就是滾動(dòng)條距離底部一定距離（C）的值。
果然，沒(méi)問(wèn)題了，有縮放時(shí)也可以正常實(shí)現(xiàn)下拉加載。

于是，記錄下來(lái)，分享給大家，共勉。

另外提醒一點(diǎn)，$(window).scroll(function()監(jiān)聽(tīng)滾動(dòng)事件不執(zhí)行這個(gè)問(wèn)題中的采納答案提到：

html,body的高度樣式如果設(shè)置為100%，$(window).scroll方法將檢測(cè)不到正確的滾出高度（0），導(dǎo)致滾動(dòng)監(jiān)聽(tīng)事件失效，設(shè)置html,body{ height:auto }可以解決。
代碼 
var totalPages;//總頁(yè)數(shù)
var pageno = 0;//當(dāng)前頁(yè)數(shù)
var C = 10;//滾動(dòng)條距離底部的距離
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue >= -C) {
           //do something
           if (pageno < totalPages - 1) {
               pageno++;
               doSomething(pageno);
           } else {
               alert("沒(méi)有更多了");
           }
       }
   });
);
 
function doSomething(pageno) {
        var url = "*******";//分頁(yè)列表的接口
        var data = {
                size: 5,
                start: pageno,
        };
        $.getJSON(url, data, function (rtn) {
                
        });
}
相關(guān)參考

web頁(yè)面在滾動(dòng)條下拉時(shí)加載更多內(nèi)容（個(gè)人項(xiàng)目經(jīng)驗(yàn)）
下拉加載更多DEMO(js實(shí)現(xiàn))
$(window).scroll(function()監(jiān)聽(tīng)滾動(dòng)事件不執(zhí)行

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97160.html

相關(guān)文章

  • 移動(dòng)端滾動(dòng)研究

    摘要：還會(huì)有一個(gè)性能上的問(wèn)題就是當(dāng)頁(yè)面的列表過(guò)長(zhǎng)，元素過(guò)多時(shí)，在模擬滾動(dòng)，下拉刷新這段時(shí)間內(nèi)，頁(yè)面也會(huì)有卡頓現(xiàn)象，這里采取了一個(gè)優(yōu)化策略即列表較長(zhǎng)時(shí)數(shù)量較多時(shí)，在觸發(fā)下拉刷新的時(shí)機(jī)時(shí)將頁(yè)面視窗之外的元素隱藏或者存放在里面。 移動(dòng)web滾動(dòng)問(wèn)題 在移動(dòng)端如果使用局部滾動(dòng)，意思就是我們的滾動(dòng)在一個(gè)固定寬高的div內(nèi)觸發(fā)，將該div設(shè)置成overflow:scroll/auto;來(lái)形成div內(nèi)部的...

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

  • H5下拉刷新和上拉加載實(shí)現(xiàn)原理淺析

    摘要：原文鏈接前言在移動(dòng)端網(wǎng)頁(yè)中，下拉刷新和上拉加載更多數(shù)據(jù)的交互方式出現(xiàn)頻率很高，開(kāi)源社區(qū)也有很多類似的解決方案，如，庫(kù)等。 原文鏈接：justrockit.top 前言 在移動(dòng)端H5網(wǎng)頁(yè)中，下拉刷新和上拉加載更多數(shù)據(jù)的交互方式出現(xiàn)頻率很高，開(kāi)源社區(qū)也有很多類似的解決方案，如iscroll，pulltorefresh.js庫(kù)等。下面是對(duì)這兩種常見(jiàn)交互基本實(shí)現(xiàn)原理的闡述。 實(shí)現(xiàn)原理 下拉刷新...

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

  • H5下拉刷新和上拉加載實(shí)現(xiàn)原理淺析

    摘要：原文鏈接前言在移動(dòng)端網(wǎng)頁(yè)中，下拉刷新和上拉加載更多數(shù)據(jù)的交互方式出現(xiàn)頻率很高，開(kāi)源社區(qū)也有很多類似的解決方案，如，庫(kù)等。 原文鏈接：justrockit.top 前言 在移動(dòng)端H5網(wǎng)頁(yè)中，下拉刷新和上拉加載更多數(shù)據(jù)的交互方式出現(xiàn)頻率很高，開(kāi)源社區(qū)也有很多類似的解決方案，如iscroll，pulltorefresh.js庫(kù)等。下面是對(duì)這兩種常見(jiàn)交互基本實(shí)現(xiàn)原理的闡述。 實(shí)現(xiàn)原理 下拉刷新...

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

  • 實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新的vue插件(mescroll.js)

    摘要：做一個(gè)簡(jiǎn)單的移動(dòng)端展示項(xiàng)目，后臺(tái)分頁(yè)后前端加載，實(shí)現(xiàn)上拉加載下一頁(yè)，找了下，還是用這個(gè)插件好一點(diǎn)安裝不要使用安裝導(dǎo)入在哪個(gè)頁(yè)面使用則在哪個(gè)頁(yè)面導(dǎo)入這里的話，我使用全局導(dǎo)入會(huì)出現(xiàn)問(wèn)題若有錯(cuò)還請(qǐng)大家指出暫時(shí)想到的就是局部引入注冊(cè)組件注冊(cè)組件 做一個(gè)簡(jiǎn)單的移動(dòng)端展示項(xiàng)目，后臺(tái)分頁(yè)后前端加載，實(shí)現(xiàn)上拉加載下一頁(yè)，找了下，還是用這個(gè)mescroll.js插件好一點(diǎn) 1.npm安裝 npm ins...

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

  • 總結(jié)開(kāi)發(fā)過(guò)程踩到的坑（五）（小程序篇）

    摘要：最近開(kāi)始接觸了小程序的開(kāi)發(fā)，由于時(shí)間問(wèn)題，文檔閱讀的并不完備，也踩了很多坑。的使用微信小程序不支持原生頁(yè)面跳轉(zhuǎn)，包括和，若要跳轉(zhuǎn)小程序應(yīng)用內(nèi)頁(yè)面，需要使用，詳見(jiàn)。參考文獻(xiàn)微信小程序開(kāi)發(fā)者文檔 最近開(kāi)始接觸了小程序的開(kāi)發(fā)，由于時(shí)間問(wèn)題，文檔閱讀的并不完備，也踩了很多坑。不得不說(shuō)，微信的野心真是越來(lái)越大了，但是它超高的流量注定了它有這個(gè)資本。 原文地址：mini programs 目...

    young.li 評(píng)論0 收藏0

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

0條評(píng)論

antyiwei

男|高級(jí)講師

TA的文章

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