微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁效果（ajax）
更新時(shí)間：2017年06月13日 16:38:36 作者：PHP急先鋒
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
一般在PC上我們要分頁都是通過上一頁和下一頁來實(shí)現(xiàn)的，手機(jī)通過當(dāng)下滑到一定程度的時(shí)候自動(dòng)加載下一頁面。
實(shí)現(xiàn)思路：首先加載部分?jǐn)?shù)據(jù)，當(dāng)下滑到某個(gè)元素可見的時(shí)候，如果還有數(shù)據(jù)，則新發(fā)送請(qǐng)求，然后追加在當(dāng)前頁面。
/*
*<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è)頁碼為當(dāng)前第一頁
var page = 1;
//獲得總頁碼
var pageTotal = parseInt($('#allpage').val());
//是否請(qǐng)求出AJAX的“開關(guān)”；
var onOff = true;
$(window).scroll(function () {
//拖動(dòng)滾條時(shí)，是否發(fā)送AJAX的一個(gè)“開關(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) {//最底部元素可見，開關(guān)開啟而且還有下拉
//$('#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頁面動(dòng)態(tài)顯示時(shí)間變化示例代碼
頁面動(dòng)態(tài)顯示時(shí)間變化的方法有很多，本文為大家介紹下使用javascript的具體實(shí)現(xiàn)，感興趣的朋友不要錯(cuò)過2013-12-12
這篇文章主要為大家詳細(xì)介紹了js代碼實(shí)現(xiàn)多人聊天室，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
一文詳解JavaScript的事件監(jiān)聽(最新整理)
Web頁面需要經(jīng)常和用戶之間進(jìn)行交互,而交互的過程中我們可能想要捕捉這個(gè)交互的過程,比如用戶點(diǎn)擊了某個(gè)按鈕、用戶在輸入框里面輸入了某個(gè)文本、用戶鼠標(biāo)經(jīng)過了某個(gè)位置,下面介紹下JavaScript的事件監(jiān)聽,感興趣的朋友一起看看吧2024-01-01
Angular+Bootstrap+Spring Boot實(shí)現(xiàn)分頁功能實(shí)例代碼
這篇文章主要介紹了Angular+Bootstrap+Spring Boot實(shí)現(xiàn)分頁功能實(shí)例代碼,需要的朋友可以參考下2017-07-07
JavaScript中的Array對(duì)象是一個(gè)動(dòng)態(tài)的數(shù)組，也是一個(gè)Stack,還是一個(gè)Dictionary2011-01-01
這篇文章主要介紹了深入理解Promise.all，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
javascript中的循環(huán)語句for語句深入理解
for循環(huán)是多數(shù)語言都有的。在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ì)于大家來說再熟悉不過，最近工作中自己利用Javascript就寫了一個(gè)，現(xiàn)在將實(shí)現(xiàn)的代碼分享給大家，希望對(duì)有需要的朋友們能有所幫助，感興趣的朋友們下面來一起看看吧。2016-10-10
Layui 是一個(gè)非常流行的前端框架,其中的table組件可以幫助您實(shí)現(xiàn)復(fù)選框功能,下面這篇文章主要給大家介紹了關(guān)于前端layui?table表格勾選事件以及常見模塊的相關(guān)資料,需要的朋友可以參考下2024-08-08