微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁(yè)效果（ajax）

更新時(shí)間：2017年06月13日 16:38:36 作者：PHP急先鋒

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一般在PC上我們要分頁(yè)都是通過(guò)上一頁(yè)和下一頁(yè)來(lái)實(shí)現(xiàn)的，手機(jī)通過(guò)當(dāng)下滑到一定程度的時(shí)候自動(dòng)加載下一頁(yè)面。

實(shí)現(xiàn)思路：首先加載部分?jǐn)?shù)據(jù)，當(dāng)下滑到某個(gè)元素可見(jiàn)的時(shí)候，如果還有數(shù)據(jù)，則新發(fā)送請(qǐng)求，然后追加在當(dāng)前頁(yè)面。

/*
*<div class='topicBox' id='listBox'>
*</div>
*/
 

//判斷元素是否進(jìn)入可視區(qū)域 
function see(objLiLast) {
 //瀏覽器可視區(qū)域的高度 
 var see = document.documentElement.clientHeight;
 //滾動(dòng)條滑動(dòng)的距離 
 var winScroll = $(this).scrollTop();
 //距離瀏覽器頂部的 
 var lastLisee = $(objLiLast).offset().top;
 return lastLisee < (see + winScroll) ? true : false;
}
//預(yù)設(shè)頁(yè)碼為當(dāng)前第一頁(yè)
var page = 1;
//獲得總頁(yè)碼
var pageTotal = parseInt($('#allpage').val());
//是否請(qǐng)求出AJAX的“開(kāi)關(guān)”； 
var onOff = true;
$(window).scroll(function () {
//拖動(dòng)滾條時(shí)，是否發(fā)送AJAX的一個(gè)“開(kāi)關(guān)” 
$('.topicBox').each(function () {
//引用最后一個(gè)div 
var lastLi = $('.topicBox:last');
//調(diào)用是否進(jìn)入可視區(qū)域函數(shù) 
var isSee = see(lastLi);
if (isSee && onOff && page < pageTotal) {//最底部元素可見(jiàn)，開(kāi)關(guān)開(kāi)啟而且還有下拉
//$('#loadNext').show(); //顯示正在加載圖標(biāo)
onOff = false;
$.ajax({
url: '/GetPageData',
type: 'GET',
dataType: 'json',
data: {
page: page+1
},
asyc: false,
success: function (result) {
if (result.status == 'success') {
var data = result.result;
for (var i = 0; i < data.length; i++) {
//to do coding ...
};
}
//$('#loadNext').hide(); //隱藏正在加載
onOff = true;
page ++;
}
});

}
});
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript頁(yè)面動(dòng)態(tài)顯示時(shí)間變化示例代碼
頁(yè)面動(dòng)態(tài)顯示時(shí)間變化的方法有很多，本文為大家介紹下使用javascript的具體實(shí)現(xiàn)，感興趣的朋友不要錯(cuò)過(guò)
2013-12-12
js代碼實(shí)現(xiàn)多人聊天室
這篇文章主要為大家詳細(xì)介紹了js代碼實(shí)現(xiàn)多人聊天室，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
一文詳解JavaScript的事件監(jiān)聽(tīng)(最新整理)
Web頁(yè)面需要經(jīng)常和用戶之間進(jìn)行交互,而交互的過(guò)程中我們可能想要捕捉這個(gè)交互的過(guò)程,比如用戶點(diǎn)擊了某個(gè)按鈕、用戶在輸入框里面輸入了某個(gè)文本、用戶鼠標(biāo)經(jīng)過(guò)了某個(gè)位置,下面介紹下JavaScript的事件監(jiān)聽(tīng),感興趣的朋友一起看看吧
2024-01-01
Angular+Bootstrap+Spring Boot實(shí)現(xiàn)分頁(yè)功能實(shí)例代碼
這篇文章主要介紹了Angular+Bootstrap+Spring Boot實(shí)現(xiàn)分頁(yè)功能實(shí)例代碼,需要的朋友可以參考下
2017-07-07
JavaScript中的Array對(duì)象使用說(shuō)明
JavaScript中的Array對(duì)象是一個(gè)動(dòng)態(tài)的數(shù)組，也是一個(gè)Stack,還是一個(gè)Dictionary
2011-01-01
深入理解Promise.all
這篇文章主要介紹了深入理解Promise.all，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
javascript中的循環(huán)語(yǔ)句for語(yǔ)句深入理解
for循環(huán)是多數(shù)語(yǔ)言都有的。在javascript中，for循環(huán)有幾種不同的使用情況，下面為大家一一介紹下
2014-04-04
JavaScript實(shí)現(xiàn)窮舉排列(permutation)算法謎題解答
這篇文章主要介紹了JavaScript實(shí)現(xiàn)窮舉排列(permutation)算法謎題解答,窮舉排列是指窮舉一個(gè)數(shù)組中各個(gè)元素的排列,需要的朋友可以參考下
2014-12-12
Javascript將字符串日期格式化為yyyy-mm-dd的方法
日期格式化相信對(duì)于大家來(lái)說(shuō)再熟悉不過(guò)，最近工作中自己利用Javascript就寫了一個(gè)，現(xiàn)在將實(shí)現(xiàn)的代碼分享給大家，希望對(duì)有需要的朋友們能有所幫助，感興趣的朋友們下面來(lái)一起看看吧。
2016-10-10
前端layui?table表格勾選事件以及常見(jiàn)模塊詳解
Layui 是一個(gè)非常流行的前端框架,其中的table組件可以幫助您實(shí)現(xiàn)復(fù)選框功能,下面這篇文章主要給大家介紹了關(guān)于前端layui?table表格勾選事件以及常見(jiàn)模塊的相關(guān)資料,需要的朋友可以參考下
2024-08-08