微信小程序?qū)崿F(xiàn)列表下拉刷新上拉加載
更新時(shí)間：2020年07月29日 14:48:31 作者：Rattenking
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)列表下拉刷新上拉加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)列表下拉刷新上拉加載的具體代碼，供大家參考，具體內(nèi)容如下
DEMO下載
效果圖
原理
利用微信小程序的onPullDownRefresh函數(shù)（下拉刷新監(jiān)聽(tīng)函數(shù)）和onReachBottom函數(shù)（上拉加載監(jiān)聽(tīng)函數(shù)）監(jiān)聽(tīng)頁(yè)面的下拉和上拉動(dòng)態(tài)，從而對(duì)頁(yè)面數(shù)據(jù)進(jìn)行修改！
頁(yè)面配置JSON
- enablePullDownRefresh：開(kāi)啟下拉刷新；
- onReachBottomDistance：頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離，單位為px。
{
"enablePullDownRefresh": true,
"onReachBottomDistance": 50
}
WXML
<view class="tui-content">
<view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view>
</view>
JS
此處用setTimeout模擬請(qǐng)求數(shù)據(jù)；
加載數(shù)據(jù)限制三次，調(diào)用wx.showToast顯示沒(méi)有更多數(shù)據(jù)。
Page({
data: {
dataList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
count : 0
},
onPullDownRefresh(){
var self = this;
setTimeout(() => {
// 模擬請(qǐng)求數(shù)據(jù)，并渲染
var arr = self.data.dataList, max = Math.max(...arr);
for (var i = max + 1; i <= max + 3; ++i) {
arr.unshift(i);
}
self.setData({ dataList: arr });
// 數(shù)據(jù)成功后，停止下拉刷新
wx.stopPullDownRefresh();
}, 1000);
},
onReachBottom(){
var arr = this.data.dataList, max = Math.max(...arr);
if (this.data.count < 3) {
for (var i = max + 1; i <= max + 5; ++i) {
arr.push(i);
}
this.setData({
dataList: arr,
count: ++this.data.count
});
} else {
wx.showToast({
title: '沒(méi)有更多數(shù)據(jù)了！',
image: '../../src/images/noData.png',
})
}
}
})
總結(jié)
必須在每次數(shù)據(jù)請(qǐng)求完成后，使用wx.stopPullDownRefresh()停止下拉刷新。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用AOP改善javascript代碼,需要的朋友可以參考下2015-05-05
Bmail聯(lián)系人飛來(lái)飛去效果...2007-01-01
這篇文章主要介紹了javascript 事件處理示例分享,需要的朋友可以參考下2014-12-12
最近重新溫習(xí)了一次《javascript設(shè)計(jì)模式》，確實(shí)是一本好書(shū)，每次看都有不同的領(lǐng)悟，每次領(lǐng)悟到的都受益匪淺，無(wú)怪古圣人都說(shuō)學(xué)無(wú)止鏡了，僅以“加油，好嗎？”共勉！2009-10-10
這篇文章主要介紹了一個(gè)奇葩的最短的 IE 版本判斷JS腳本,非?？岬囊欢未a,需要的朋友可以參考下2014-05-05
Ionic如何實(shí)現(xiàn)下拉刷新與上拉加載功能
在日常項(xiàng)目開(kāi)發(fā)中我們經(jīng)常見(jiàn)到下拉刷新上拉加載的功能，接下來(lái)通過(guò)本文給大家介紹ionic如何實(shí)現(xiàn)下拉刷新與上拉加載的相關(guān)資料,需要的朋友可以參考下2016-06-06
JavaScript必知必會(huì)(六) delete in instanceof
這篇文章主要介紹了JavaScript必知必會(huì)(六) delete in instanceof的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了BootStrap表單時(shí)間選擇器的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05