微信小程序?qū)崿F(xiàn)下拉刷新和上拉分頁(yè)效果的方法詳解
下拉刷新
下拉刷新這個(gè)玩意吧,很有用,但是在我博客關(guān)聯(lián)的小程序中,用處不大,也是,我那個(gè)小程序一共也沒有幾個(gè)頁(yè)……
我這里還是用在首頁(yè),上拉分頁(yè),下拉刷新重載分頁(yè)。我就是這么做的。
下拉刷新和上拉分頁(yè)還是有區(qū)別的。
下拉刷新需要在index.json中添加屬性:
"enablePullDownRefresh": true
Index.js
Page({
data: {
// 文章數(shù)組
articleList:[],
//每頁(yè)顯示的行數(shù):
pagesize: 20,
//頁(yè)碼(從1開始)
page:1,// 文章頁(yè)碼
//用于標(biāo)識(shí)是否還有更多的狀態(tài)
state: 1,
//用于數(shù)組的追加和暫存
allProject: [],
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
*/
onReady: function () {
var self = this;
self.getArticleList();
},
/**
* 獲取文章列表
*/
getArticleList()
{
var self = this;
// 請(qǐng)求后臺(tái)接口獲取文章列表
wx.request({
// 請(qǐng)求連接
url: 'https://guanchao.site/index/xxxx/xxxxx,
// 請(qǐng)求所需要的的參數(shù)
data: {
'page':self.data.page
},
success(result){
var resData = result.data;
var resLength = result.data.length;
//如果搜出來的結(jié)果<1 就說明后面已經(jīng)沒數(shù)據(jù)可加載了,所以將state設(shè)為0
if (resLength < 1)
{
self.setData({
state: 0
});
}
else
{
var state1 = 1;
//如果有數(shù)據(jù),但小于每次期望加載的數(shù)據(jù)量(pagesize),將state設(shè)為0,表示后面已沒有數(shù)據(jù)可加載
if (resLength < self.pagesize)
{
var state1 = 0;
}
//循環(huán)將結(jié)果集追加到數(shù)組后面
for (var i = 0; i < resLength; i++) {
self.data.allProject.push(resData[i]);
}
self.setData({
articleList: self.data.allProject,
state: state1
});
}
wx.hideLoading();
}
});
},
/**
* 下拉刷新
*/
onPullDownRefresh() {
// 下拉刷新
var self = this;
wx.showLoading({
title: '加載中...',
});
// 頁(yè)碼重新設(shè)置回1
self.data.page = 1;
// 將顯示列表數(shù)據(jù)清空
self.data.allProject = [];
self.getArticleList();
wx.stopPullDownRefresh();
},
});可以看到,我們?cè)黾恿艘粋€(gè)onPullDownRefresh函數(shù)并在里面調(diào)用了getArticleList去請(qǐng)求第一頁(yè)的數(shù)據(jù),并且頁(yè)面顯示數(shù)據(jù)的數(shù)組清空, 頁(yè)碼設(shè)置成1,重新加載數(shù)據(jù)。
另外,下拉刷新的事件也可以通過調(diào)用APIwx.startPullDownRefresh觸發(fā),效果與用戶手動(dòng)下拉刷新一致。
上拉分頁(yè)
一般APP 或者 手機(jī)端一般給我們提供的都是,上拉分頁(yè),但是vant小程序版的組件是為我們提供了類似于PC網(wǎng)頁(yè)那樣的頁(yè)碼分頁(yè)。
但是吧,我就不太想用web網(wǎng)站那樣做一串?dāng)?shù)字頁(yè)碼那樣了,這是反人類的設(shè)計(jì)。使用上拉進(jìn)行分頁(yè)。
小程序?yàn)槲覀兲峁┝松侠虞d事件:onPullDownRefresh
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},對(duì),就是這個(gè)玩意。
這個(gè)直接就能觸發(fā),不需要其他什么多余的設(shè)置,下邊我分享一下,我上拉分頁(yè)的代碼。
Index.js
Page({
data: {
// 文章數(shù)組
articleList:[],
//每頁(yè)顯示的行數(shù):
pagesize: 20,
//頁(yè)碼(從1開始)
page:1,// 文章頁(yè)碼
//用于標(biāo)識(shí)是否還有更多的狀態(tài)
state: 1,
//用于數(shù)組的追加和暫存
allProject: [],
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
*/
onReady: function () {
var self = this;
self.getArticleList();
},
/**
* 獲取文章列表
*/
getArticleList()
{
var self = this;
// 請(qǐng)求后臺(tái)接口獲取文章列表
wx.request({
// 請(qǐng)求連接
url: 'https://guanchao.site/index/xxxx/xxxxx,
// 請(qǐng)求所需要的的參數(shù)
data: {
'page':self.data.page
},
success(result){
var resData = result.data;
var resLength = result.data.length;
//如果搜出來的結(jié)果<1 就說明后面已經(jīng)沒數(shù)據(jù)可加載了,所以將state設(shè)為0
if (resLength < 1)
{
self.setData({
state: 0
});
}
else
{
var state1 = 1;
//如果有數(shù)據(jù),但小于每次期望加載的數(shù)據(jù)量(pagesize),將state設(shè)為0,表示后面已沒有數(shù)據(jù)可加載
if (resLength < self.pagesize)
{
var state1 = 0;
}
//循環(huán)將結(jié)果集追加到數(shù)組后面
for (var i = 0; i < resLength; i++) {
self.data.allProject.push(resData[i]);
}
self.setData({
articleList: self.data.allProject,
state: state1
});
}
wx.hideLoading();
}
});
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
var self = this;
var state = self.data.state;
if (state > 0){
// wx.showLoading({
// title: '加載中...',
// });
self.data.page = self.data.page + 1;
self.getArticleList()
// wx.hideLoading();
}
},
});以上大概就是上拉分頁(yè)的代碼,說是上拉分頁(yè),其實(shí)就是滾動(dòng)條觸底觸發(fā)的方法。但是為了體驗(yàn)的更好,還是需要做一些限制的。
大概就是這么實(shí)現(xiàn)的。
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)下拉刷新和上拉分頁(yè)效果的方法詳解的文章就介紹到這了,更多相關(guān)小程序下拉刷新 上拉分頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 微信小程序?qū)崙?zhàn)之上拉(分頁(yè)加載)效果(2)
- 微信小程序分頁(yè)加載的實(shí)例代碼
- 微信小程序云開發(fā)實(shí)現(xiàn)數(shù)據(jù)添加、查詢和分頁(yè)
- 微信小程序模板之分頁(yè)滑動(dòng)欄
- 微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁(yè)效果(ajax)
- 微信小程序?qū)崿F(xiàn)分頁(yè)加載效果
- 微信小程序?qū)崿F(xiàn)瀑布流分頁(yè)滾動(dòng)加載
- 微信小程序之搜索分頁(yè)功能的實(shí)現(xiàn)代碼
- 微信小程序?qū)崿F(xiàn)分頁(yè)查詢?cè)斀?/a>
- 微信小程序?qū)崿F(xiàn)本地分頁(yè)加載
相關(guān)文章
JavaScript實(shí)現(xiàn)像雪花一樣的Hexaflake分形
這篇文章主要介紹了JavaScript實(shí)現(xiàn)像雪花一樣的Hexaflake分形,文中示例代碼非常詳細(xì),幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07
JavaScript如何通過userAgent判斷幾個(gè)常用瀏覽器詳解
userAgent 屬性是一個(gè)只讀的字符串,聲明了瀏覽器用于 HTTP 請(qǐng)求的用戶代理頭的值,這篇文章主要給大家介紹了關(guān)于JavaScript如何通過userAgent判斷幾個(gè)常用瀏覽器的相關(guān)資料,需要的朋友可以參考下2021-06-06
JS實(shí)現(xiàn)調(diào)用本地?cái)z像頭功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)調(diào)用本地?cái)z像頭功能,結(jié)合實(shí)例形式分析了Javascript基于瀏覽器對(duì)本地硬件操作簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05
JS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)與刷新的方法匯總
這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)與刷新的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
javascript實(shí)現(xiàn)搶購(gòu)倒計(jì)時(shí)程序
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)搶購(gòu)倒計(jì)時(shí)程序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08
js采用map取到id集合組并且實(shí)現(xiàn)點(diǎn)擊一行選中一行
本文為大家介紹下如何使用js采用map取到id集合組,并且點(diǎn)擊一行選中一行2013-12-12
electron實(shí)現(xiàn)讀取和寫入配置文件的示例詳解
這篇文章主要介紹了electron實(shí)現(xiàn)讀取和寫入配置文件的示例,文中通過代碼示例和圖文結(jié)合的方式介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03

