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

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