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

小程序項目中上拉刷新下拉加載是比較常見的需求，官方文檔也提供了相當友好的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(){
        //觸發了上拉加載，做些什么
    },