小程序項目中上拉刷新下拉加載是比較常見的需求，官方文檔也提供了相當友好的API，但是因為API隱藏的比較深，文檔描述也比較模糊所以也折騰了一番（官方文檔），在此記錄一下使用方式

onPullDownRefresh() //用戶下拉刷新事件，onReachBottom() //用戶上拉觸底事件

onPullDownRefresh和onReachBottom是小程序的頁面事件，官方文檔描述”需要在app.json的window選項中或頁面的json文件中開啟enablePullDownRefresh“，個人覺得還是在頁面配置較好，畢竟不是每個頁面都需要上拉刷新事件，

//json配置
{
  "usingComponents": {},
  
 
"backgroundTextStyle":"dark",//dark：顯示刷新動畫
  "enablePullDownRefresh":true,//允許下拉刷新
　"onReachBottomDistance":50//距離底部多少px時觸發上拉加載事件
}

使用方法

官方文檔：”可以通過wx.startPullDownRefresh觸發下拉刷新，調用後觸發下拉刷新動畫，效果與用戶手動下拉刷新一致“，

意思是既可以通過用戶滑動觸發，也可以通過wx.startPullDownRefresh（）調用的方式執行onPullDownRefresh()方法，代碼如下

   onShow() {
        setTimeout(()
 
=>{
            //方法調用的方式觸發下拉刷新事件
            wx.startPullDownRefresh()
        },1000)
    },
    /**
     * 下滑刷新事件
     */
    onPullDownRefresh() {
        //做些什麽...
        wx.stopPullDownRefresh()//得到結果後關掉刷新動畫
        
    },

上拉加載事件需要用戶滑動，當距離頁面底部的值到onReachBottomDistance的設置參數時，便會觸發，代碼如下

    /**
     * 上拉加載
     
 
*/
    onReachBottom(){
        //做些什麽
        ......
    },

最後看一個整體的代碼

    onShow() {
        setTimeout(()=>{
            wx.startPullDownRefresh()//通過方法調用刷新
        },1000)
    },
    /**
     * 下滑刷新事件
     */
    onPullDownRefresh() {
        wx.stopPullDownRefresh()//結束刷新
        
    },
    /**
     * 上拉加載
     */
    onReachBottom(){
        //觸發了上拉加載，做些什麽
    },

小程序 上拉刷新/下拉加載