1. 程式人生 > >js滾動分頁載入資料

js滾動分頁載入資料

實現理念:

1.判斷滾動條到底部觸發載入函式

2.請求資料

3.追加資料

html:

<div class="list_flex" id="listrow">
<a href="./index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke.detail&id=1">
    <div class="list_flex_son">
        <img data-original="http://img3.tbcdn.cn/tfscom/i3/710919382/TB25HzOv3RkpuFjy1zeXXc.6FXa_!!710919382.jpg" class="list_flex_son_img">                
        <div class="list_flex_son_title">5條 無痕內褲女冰絲一片式中腰性感純棉襠女士三角內褲大碼薄款夏</div>
        <div class="list_flex_son_row">
            <span class="sfsr_price">¥21.90</span>
            <span class="sfsr_tbprice">淘寶價:24.90元</span>
        </div>
    </div>
</a>
</div>
<!--資料載入提示,預設隱藏-->
<div id="add-more" style="text-align: center;">努力載入中...</div>




js:

//分頁載入
$(function(){
var hasMore;
var page = 1; //初始頁碼
var maxnum = 2;//設定載入次數

var downrange= 100;                //下邊界-參考正在載入提示層/px
var $main = $("#showbox");            //主體
var $loaddiv = $("#add-more") ;       //載入提示層
var totalheight = 0; 
var $listrow=$("#listrow");
//ajax-fun
function ajaxLoad(){
var html="";
page=page+1;//每次拉到底部page加1
//console.log(page)
hasMore=false;
$.ajax({
url:"http://wechat.ixunluo.com/weishopcs/app/index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke",
type:"post",
data:{page:page},//請求頁數
success:function(res){
var list = eval(res);
//console.log(list.length);
//var list=JSON.parse(res);
if(list.length>0) {
    hasMore=true;
//console.log(JSON.parse(res));
    //追加資料
    for(var i=0;i<list.length;i++) {
        html+="<a href='./index.php?i=3&amp;c=entry&amp;m=ewei_shopv2&amp;do=mobile&amp;r=taobaoke.detail&amp;id="+list[i].id+"'>";
        html+="<div class='list_flex_son'>";
        html+="<img data-original='"+res[i]+"' class='list_flex_son_img' src='"+list[i].thumb+"' style='height: 175.313px;'>";
        html+="<div class='list_flex_son_title'>"+list[i].title+"</div>";
        html+="<div class='list_flex_son_row'>";
        html+="<span class='sfsr_price'>¥"+list[i].marketprice+"</span>";
        html+="<span class='sfsr_tbprice'>淘寶價:"+list[i].productprice+"元</span>";
        html+="</div>";
        html+="</div>";
        html+="</a>";
    }
    $listrow.append(html);//資料追加到list
    var imgWidth=$('.list_flex_son_img').width();
    $('.list_flex_son_img').height(imgWidth);
}    
}
})
}

//載入中隱藏顯示
$loaddiv.ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
})
ifLoad();
//scroll滾動觸發載入事件
function ifLoad(){
hasMore=true;
var w = $(window);
var lastTime = new Date();
window.addEventListener("scroll", function scrollHandler() {
var scrollh = $(document).height();
var bua = navigator.userAgent.toLowerCase();
if (bua.indexOf('iphone') != -1 || bua.indexOf('ios') != -1) {
scrollh = scrollh -140;
} else {
scrollh = scrollh - 80;
}
if(($(document).scrollTop() + w.height()) >= scrollh){
if (new Date()-lastTime <100) {
    return;
}
lastTime = new Date();
if (hasMore) {
    ajaxLoad();
}
}
}, 1000);
}

})


相關推薦

js滾動載入資料

實現理念: 1.判斷滾動條到底部觸發載入函式 2.請求資料 3.追加資料 html: <div class="list_flex" id="listrow"> <a href="./index.php?i=3&c=entry&m=ewei_

手機端滾動載入資料模型

說明:執行demo的時候請將瀏覽器模式調整到蘋果5 <!DOCTYPE html> <html lang="en"> <head> <meta

jquery 滾動載入資料

廢話不多說  直接擼 1.引入兩個js檔案,必須jquery第一個 <script src="jquery.min.js"/> <script src="jquery.infinit

【小程式】載入資料,下拉載入更多,上拉重新整理

【 小程式】分頁載入資料,下拉載入更多,上拉重新整理 分頁載入的優點就不多說了,下面主要記錄一下幾個問題點。 scroll-view元件不能用在頁面根佈局中,不然觸發不了系統的onPullDownRefresh()、onReachBottom()回撥。 在Page頁

react-infinite-scroller元件滾動載入

// 部分程式碼片段 import InfiniteScroll from 'react-infinite-scroller'; import {Scrollbars} from 'react-custom-scrollbars'; //初始的state的狀態 this.state =

Android GridView 載入資料

android UI 往右滑動,滑動到最後一頁就自動載入資料並顯示 如圖: Java程式碼   package cn.anycall.ju;  import java.util.ArrayList;  import

面試問題之:Android中ListView載入資料

熟悉Android的朋友們都知道,不管是微部落格戶端還是新聞客戶端,都離不開列表元件,可以說列表元件是Android資料展現方面最重要的元件,我們今天就要講一講列表元件ListView載入資料的相關內容。通常來說,一個應用在展現大量資料時,不會將全部的可用資料都呈現給

小程式載入資料

(({ data }) => { if (data.object && data.object.list && data.object.list.length) { let list = data.object.list; fo

listview實現載入資料的注意點

/**  * 未讀資訊list  */ public class MessageSecondLayerActivity extends Activity implements View.OnClickListener {     private ListView listView;     private L

微信小程式載入資料

在使用類似qq,微博或者新聞類等資料量大的應用經常會遇到分頁載入功能,它不僅的應用場景廣,還能挺高使用者體驗。微信小程式中也可以分頁載入資料,這篇文章就是介紹。要實現這樣的功能,一般需要在請求資料時加入當前請求頁數,以及頁的大小(每頁顯示的數量)也有一部分介面是通過請求的開始

Adapter之大資料滑動效率優化和載入資料

         在Android中如果要做到大資料分頁載入則需要我們的Activity實現OnScrollListener滾動條監聽介面。當如果要做的更加高大上。比如需要在使用者滑動至列表的底部,觸碰摸個區域,則需要實現OnTouchListener介面,等等。    

android ListView 動態載入資料

 用ListView顯示資料時,列表中資料量大時,載入和處理時間會明顯變長,如果等到把所有資料都處理載入完成再顯示出來,那程式的UI就非常糟糕了,很可能會隨資料量的變大而變慢,這樣的介面很不友好,我們無法接受。  廢話說完了,那怎麼解決這個的問題呢?  動態載入,分頁載

Android裡ListView載入資料

當列表資料量大的時候我們一半都進行分頁,android裡分頁一半不同於PC端,第幾頁的方式,一般都是滑動到底部資料自帶載入,廢話不多數了直接看程式碼: ListActivity.java類: import java.util.ArrayList; import an

android中listview載入資料

               前段時間做的新浪微博專案一直想實現listview分頁載入資料,今天終於實現了,哈哈!感覺挺好的,今天又寫了個demo給大家分享下。               首先說下listview的優化方案,這也是面試中常考的題目。優化方案有三種:1,如

微信小程式ajax請求載入資料

分頁載入功能大家遇到的應該會經常遇到,應用場景也很多,例如微博,QQ,微信朋友圈以及新聞類應用,都會有分頁載入的功能,這不僅節省了我們使用者的流量,還提升了使用者體驗。那麼今天的這篇文章就是介紹微信小程式中如何實現分頁載入的功能。照例先上原始碼及效果圖。原始碼傳送門要實現這樣的功能,一般需要在請求資料時加入當

Vue 無限滾動載入

1. 安裝 npm install vue-infinite-scroll --save 2. main.js中配置並使用 import infiniteScroll from 'vue-infinite-scroll'; Vue.use(infiniteS

ListView載入,動態從網上拉取資料

最近做專案有個需求: (1)從網上獲取分頁資料; (2)在Android手機端顯示; (3)載入的動畫和文字; (4)資料超過40條時顯示滑動條等。 由於之前自己做的偏底層一點,所以這塊內容琢磨了蠻久,最後可以完美實現專案需求,內容見下面: 一、首先,需要有個佈局

ListView 載入網路資料

1.分頁載入思路 (1)判斷是否滑動到底部 (2)當滑動到底部,往資料來源中新增資料,然後呼叫adapter.notifyDataSetChanged()方法重新整理顯示的listView資料。 2. 下面是糗事百科載入的例項,載入效果如下(為了顯示效

listView下拉重新整理,載入(無更多資料時新增底線)

package com.example.yjyg.mytourismnote.Activity; import android.content.Context; import android.os.Bundle; import android.os.Handler; import android.suppo

jqGrid 滾動載入 或者點選載入兩種方式

public static < T > void sortByBeanFiled(List < T > list, String field, String order) {     logger.debug("sort list...");     Integer d = order