微信小程序實現頁面刷新的方法與技巧

一、頁面自帶下拉刷新

在微信小程序中，頁面自帶下拉刷新功能。只需要在需要刷新的頁面的json文件中開啟enablePullDownRefresh屬性即可。
代碼示例:

<!-- xxx.json -->
{
  "navigationBarTitleText": "xxx",
  "enablePullDownRefresh": true
}

在wxml文件中，需要為頁面滾動區域的最外層添加scroll-view標籤，並添加bindscrolltolower和bindscrolltoupper兩個事件監聽函數。
代碼示例：

<!-- xxx.wxml -->
<scroll-view scroll-y="true" bindscrolltolower="handleScrollLower" bindscrolltoupper="handleScrollUpper">
  <!-- 頁面內的元素 -->
</scroll-view>

在對應的js文件中，編寫處理下拉刷新的函數，其中需要調用wx.stopPullDownRefresh()來停止刷新。
代碼示例：

// xxx.js
Page({
  handleScrollUpper() {
    wx.startPullDownRefresh({
      success: () => {
        setTimeout(() => {
          wx.stopPullDownRefresh();
        }, 2000);
      }
    })
  }
})

以上代碼實現了用戶下拉刷新頁面時，調用handleScrollUpper函數，同時自動調用頁面刷新功能。
注意：刷新完成後，需調用wx.stopPullDownRefresh()手動停止刷新，否則刷新圖標會一直存在。

二、手動刷新頁面

有時頁面自帶的下拉刷新無法滿足需求，需要手動實現頁面刷新功能。可以在頁面的wxml中定義一個按鈕，然後在對應的js文件中為按鈕添加點擊事件，通過js代碼實現頁面的局部更新。代碼示例：

<!-- xxx.wxml -->
<button bindtap="refresh">點擊刷新</button>

// xxx.js
Page({
  data: {
    list: ["數據1", "數據2", "數據3"]
  },
  refresh() {
    // 模擬請求數據
    setTimeout(() => {
      this.setData({
        list: ["數據4", "數據5", "數據6"]
      })
    }, 2000)
  }
})

以上代碼模擬了一個數據請求，請求完成後，通過this.setData方法更新list數據，從而實現局部刷新的目的。

三、使用第三方組件實現頁面刷新

在微信小程序的官方組件庫中，目前並沒有現成的下拉刷新組件，但可以使用第三方組件實現。
以weui-miniprogram組件庫為例，該組件庫中提供了loadmore和loadmore-line兩個組件可以實現下拉刷新功能。代碼示例：

// xxx.json
{
  "navigationBarTitleText": "xxx",
  "usingComponents": {
    "load-more": "/miniprogram_npm/weui-miniprogram/loadmore/loadmore"
  }
}

<!-- xxx.wxml -->
<load-more loading="{{loading}}" loading-text="正在載入數據...">
  <!-- 列表的數據 -->
  <view wx:for="{{list}}" wx:key="index">{{item}}</view>
</load-more>

// xxx.js
Page({
  data: {
    list: ["數據1", "數據2", "數據3"],
    loading: false
  },
  onLoad() {
    // 模擬請求數據
    setTimeout(() => {
      this.setData({
        list: ["數據1", "數據2", "數據3"],
        loading: false
      })
    }, 2000)
  },
  handleLoadMore() {
    this.setData({
      loading: true
    });
    // 模擬請求數據
    setTimeout(() => {
      this.setData({
        list: ["數據1", "數據2", "數據3", "數據4", "數據5", "數據6"],
        loading: false
      })
    }, 2000)
  }
})

以上代碼中，通過在json文件中加入usingComponents欄位，引入了weui-miniprogram組件庫中的loadmore組件。
在wxml文件中，使用loadmore組件包裹需要刷新的區域，同時填寫loading和loading-text屬性，表示載入狀態。
在對應的js文件中，需要在Page函數中聲明組件庫中的組件，同時編寫handleLoadMore函數，響應組件的刷新事件，並通過this.setData方法更新list數據，實現頁面刷新。