微信小程序上拉加載和下拉刷新功能實(shí)現(xiàn)
微信小程序上拉加載和下拉刷新
一.上拉加載
微信小程序的上拉加載使用onReachBottom()，寫在.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)文章
這個(gè)方法是很常用的，比如在驗(yàn)證輸入日期是否存在時(shí)，可以使用它，如果是一個(gè)不存在的日期，則其返回值將是NaN，另外如果要比較兩個(gè)日期的先后，或是計(jì)算兩個(gè)日期相差的天數(shù) ，都可以用到。2010-07-07
JavaScript實(shí)現(xiàn)統(tǒng)計(jì)文本框Textarea字?jǐn)?shù)增強(qiáng)用戶體驗(yàn)
現(xiàn)在流行的Twitter等微博客網(wǎng)站，有一個(gè)很好的用戶體驗(yàn)，就是在文本框中輸入文字的時(shí)候，會(huì)自動(dòng)統(tǒng)計(jì)輸入的字符，并顯示用戶還能輸入的字符，在限制了140個(gè)字的微博客中，這樣的小提示可以很好的增強(qiáng)用戶體驗(yàn),本文也嘗試著實(shí)現(xiàn)一下2012-12-12
基于js disabled="false"不起作用的解決辦法
本篇文章是對(duì)js disabled="false"不起作用的解決辦法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
本章節(jié)討論使用ES6編碼風(fēng)格到代碼中需要注意的點(diǎn)。通過(guò)記住這些關(guān)鍵點(diǎn)，可以讓我們寫出更優(yōu)美的、可讀性更強(qiáng)的JavaScript ES6風(fēng)格的代碼。2021-05-05
淺談?lì)愃朴?function(){}).call()的js語(yǔ)句
這篇文章主要介紹了淺談?lì)愃朴?function(){}).call()的js語(yǔ)句,的相關(guān)資料,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左滑修改、刪除功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
微信公眾平臺(tái)獲取access_token的方法步驟
這篇文章主要介紹了微信公眾平臺(tái)獲取access_token的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JavaScript中實(shí)現(xiàn)在光標(biāo)位置插入內(nèi)容的幾種方法
本文主要介紹了在網(wǎng)頁(yè)開(kāi)發(fā)中,如何使用JavaScript在文本輸入框或富文本編輯器的光標(biāo)位置插入內(nèi)容的實(shí)踐,包括獲取光標(biāo)位置的方法,創(chuàng)建文本節(jié)點(diǎn),操作Selection對(duì)象,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
非常不錯(cuò)的功能強(qiáng)大代碼簡(jiǎn)單的管理菜單美化版
由于網(wǎng)盤不穩(wěn)定,很多時(shí)候文件提示找不到，幸好U盤里存了. 喜歡這3個(gè)風(fēng)格的朋友們別在PM我啦.....我把文件傳到我服務(wù)器上了..2008-07-07
uniapp?Android解決?APP菜單、按鈕權(quán)限控制方法
這篇文章主要介紹了uniapp?Android解決?APP菜單、按鈕權(quán)限控制方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01