微信小程序頁面事件-下拉刷新,上拉加載更多


1.下拉刷新的概念及應用場景。

概念: 下拉刷新是移動端更新列表數據的交互行為,用戶通過手指在屏幕上子上而下的滑動,可以觸發頁面的下拉刷新,更新列表數據。

應用場景: 在移動端,數據列表是常見的頁面效果,更新列表數據是最基本的頁面需求,相比於按鈕刷新,定時刷新來說,下拉刷新的用戶體驗方便友好,已經成為移動端刷新列表數據的最佳解決方案。

 

微信小程序啟動下拉刷新:

兩種方式:

1.需要在app.json 的window選項中或頁面配置中開啟enablePullDownRefresh, 但是,一般情況下,推薦在頁面配置中為需要的頁面單獨開啟下拉刷新行為。

2.可以通過wx.startPullDownRefresh() 觸發下拉刷新,調用后觸發下拉刷新動畫,效果與用戶手動下拉刷新一致。

 

配置下拉刷新窗口的樣式:

需要在app.json 的window選項中或頁面配置中修改backbroundColor 和backgroundTextStyle 選項。

backgroundColor: 用來配置下拉刷新窗口的背景顏色,僅支持16進制顏色值。

backgroundTextStyle 用來配置下拉刷新loading 的樣式,僅支持dark和light

onPullDownRefresh: 頁面相關事件處理函數--監聽用戶下拉操作時執行
 
停止下拉刷新效果:
當處理萬下拉刷新后,下拉刷新的loading 效果會一直顯示,不會主動消失,需要手動隱藏下拉刷新的loading效果,此時,跳用wx.stopPullDownRefresh()可以停止當前頁面的下拉刷新。
 

上拉加載更多
1.上拉加載更多的概念及應用場景。
概念: 在移動端,隨着手指不斷向上滑動,當內容將要到達屏幕底部的時候,頁面會隨之不斷的加載后續內容,知道沒有新內容位置,我們稱之為上拉加載更多,上拉加載更多的本質就是數據的分頁加載。
應用場景: 在移動端,列表數據的分頁加載,首選的實現方式就是上拉加載更多。
 
配置上拉觸底的距離:
可以在app.json的window 選項上或頁面配置中設置觸底的距離 onReachBottomDistance 單位為px,默認觸底距離為50px。
 
監聽上拉觸底事件:onReachBottom() 函數,可以監聽用戶在當前頁面的上拉觸底事件,從而實現上拉加載更多列表數據的效果。
 
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM