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