微信小程序上拉加載和下拉刷新功能實現(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()進(jìn)行關(guān)閉,不然可能會長時間顯示刷新狀態(tài)
微信小程序開發(fā)---上拉觸底
一、上拉觸底的概念
上拉觸底是移動端的專有名詞,通過手指在屏幕上的上拉滑動操作,從而加載更多的數(shù)據(jù),也就是往下滑動。
二、監(jiān)聽頁面的上拉觸底事件
在頁面.js文件宗,通過onReachBottom()函數(shù)即可監(jiān)聽當(dāng)前頁面的上拉觸底事件
onReachBottom(){ console.log("上拉") }
三、配置上拉觸底距離
上拉觸底距離指的是觸發(fā)上拉觸底事件時,滾動條距離頁面底部的距離。
可以在全局或者頁面的.json文件中,通過onReachBottomDistance屬性配置上拉觸底的距離
小程序默認(rèn)的距離是50px
"onReachBottomDistance": 100
到此這篇關(guān)于微信小程序上拉加載和下拉刷新的文章就介紹到這了,更多相關(guān)小程序上拉加載和下拉刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實現(xiàn)統(tǒng)計文本框Textarea字?jǐn)?shù)增強(qiáng)用戶體驗
現(xiàn)在流行的Twitter等微博客網(wǎng)站,有一個很好的用戶體驗,就是在文本框中輸入文字的時候,會自動統(tǒng)計輸入的字符,并顯示用戶還能輸入的字符,在限制了140個字的微博客中,這樣的小提示可以很好的增強(qiáng)用戶體驗,本文也嘗試著實現(xiàn)一下2012-12-12基于js disabled="false"不起作用的解決辦法
本篇文章是對js disabled="false"不起作用的解決辦法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06淺談類似于(function(){}).call()的js語句
這篇文章主要介紹了淺談類似于(function(){}).call()的js語句,的相關(guān)資料,需要的朋友可以參考下2015-03-03JavaScript中實現(xiàn)在光標(biāo)位置插入內(nèi)容的幾種方法
本文主要介紹了在網(wǎng)頁開發(fā)中,如何使用JavaScript在文本輸入框或富文本編輯器的光標(biāo)位置插入內(nèi)容的實踐,包括獲取光標(biāo)位置的方法,創(chuàng)建文本節(jié)點,操作Selection對象,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10uniapp?Android解決?APP菜單、按鈕權(quán)限控制方法
這篇文章主要介紹了uniapp?Android解決?APP菜單、按鈕權(quán)限控制方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01