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() 函數,可以監聽用戶在當前頁面的上拉觸底事件,從而實現上拉加載更多列表數據的效果。