微信小程序上拉加載和下拉刷新功能實(shí)現(xiàn)
微信小程序上拉加載和下拉刷新
一.上拉加載
微信小程序的上拉加載使用onReachBottom()，寫(xiě)在.js文件里面的Page方法里面。
onReachBottom(){
//上拉自動(dòng)更新到4，5，6
wx.showLoading({
title: '數(shù)據(jù)加載中...',
})
setTimeout(()=>{
const lastNum=this.data.numList[this.data.numList.length-1]
const newAry=[lastNum+1,lastNum+2,lastNum+3]
this.setData({
numList:[...this.data.numList,...newAry]
})
wx.hideLoading()
},1500)
}onReachBottom()會(huì)監(jiān)聽(tīng)微信小程序上拉操作。
需要在.json文件里面配置"onReachBottomDistance"屬性。
如下面的代碼，在距離底部50px的時(shí)候會(huì)觸發(fā)到onReachBottom()
"onReachBottomDistance": 50px
二.下拉刷新
下拉刷新使用onPullDownRefresh()
onPullDownRefresh(){
//下拉刷新后，顯示1，2，3
this.setData({
numList:[1,2,3]
})
if(this.data.numList.length === 3){
wx.stopPullDownRefresh()
}
}注意，在使用onPullDownRefresh() 的時(shí)候，需要及時(shí)使用wx.stopPullDownRefresh()進(jìn)行關(guān)閉，不然可能會(huì)長(zhǎng)時(shí)間顯示刷新?tīng)顟B(tài)
微信小程序開(kāi)發(fā)---上拉觸底
一、上拉觸底的概念
上拉觸底是移動(dòng)端的專有名詞，通過(guò)手指在屏幕上的上拉滑動(dòng)操作，從而加載更多的數(shù)據(jù)，也就是往下滑動(dòng)。
二、監(jiān)聽(tīng)頁(yè)面的上拉觸底事件
在頁(yè)面.js文件宗，通過(guò)onReachBottom（）函數(shù)即可監(jiān)聽(tīng)當(dāng)前頁(yè)面的上拉觸底事件
onReachBottom(){
console.log("上拉")
}三、配置上拉觸底距離
上拉觸底距離指的是觸發(fā)上拉觸底事件時(shí)，滾動(dòng)條距離頁(yè)面底部的距離。
可以在全局或者頁(yè)面的.json文件中，通過(guò)onReachBottomDistance屬性配置上拉觸底的距離
小程序默認(rèn)的距離是50px
"onReachBottomDistance": 100
到此這篇關(guān)于微信小程序上拉加載和下拉刷新的文章就介紹到這了,更多相關(guān)小程序上拉加載和下拉刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解webpack與SPA實(shí)踐之開(kāi)發(fā)環(huán)境搭建
這篇文章主要介紹了詳解webpack與SPA實(shí)踐之開(kāi)發(fā)環(huán)境搭建,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
js去掉數(shù)組中undefined及空字符串、null兩種方法例子
這篇文章主要給大家介紹了關(guān)于js去掉數(shù)組中undefined及空字符串、null的兩種方法例子,文中還介紹了undefined與null之間的區(qū)別,通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
javascript模擬鼠標(biāo)點(diǎn)擊事件原理和實(shí)現(xiàn)方法
本文詳細(xì)介紹了JS模擬鼠標(biāo)點(diǎn)擊事件的原理以及應(yīng)用場(chǎng)景,并提供了模擬鼠標(biāo)左鍵點(diǎn)擊事件、右鍵點(diǎn)擊事件、滾輪事件和移動(dòng)事件的代碼實(shí)現(xiàn),了解JS模擬鼠標(biāo)點(diǎn)擊事件的原理和實(shí)現(xiàn)方法對(duì)于開(kāi)發(fā)人員非常重要,這對(duì)于許多面向用戶的web應(yīng)用程序的開(kāi)發(fā)和測(cè)試都具有很重要的意義2023-09-09
本文主要介紹了基本DOM節(jié)點(diǎn)操作，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
JavaScript知識(shí)點(diǎn)總結(jié)(十六)之Javascript閉包（Closure）代碼詳解
閉包是可以包含自由（未綁定）變量的代碼塊；這些變量不是在這個(gè)代碼塊或者任何全局上下文中定義的，而是在定義代碼塊的環(huán)境中定義。本文主要介紹了javascript中的閉包,感興趣的朋友一起看看吧2016-05-05
這篇文章主要介紹了JS求解三元一次方程組值的方法,涉及JS數(shù)學(xué)運(yùn)算的相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了簡(jiǎn)單的js圖片輪換代碼(js圖片輪播),需要的朋友可以參考下2014-05-05
這篇文章主要是對(duì)XMLHttpRequest的緩存問(wèn)題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
JavaScript canvas實(shí)現(xiàn)刮刮樂(lè)案例
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)刮刮樂(lè)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript正則表達(dá)式校驗(yàn)與遞歸函數(shù)實(shí)際應(yīng)用實(shí)例解析
這篇文章主要介紹了JavaScript正則表達(dá)式校驗(yàn)與遞歸函數(shù)實(shí)際應(yīng)用,需要的朋友可以參考下2017-08-08