微信開發之下拉重新整理上拉載入更多

微信小程式實現“下拉重新整理、上拉載入更多”功能，有兩種實現方式：

方式1：利用頁面的onPullDownRefresh和onReachBottom實現：

• onPullDownRefresh: 下拉重新整理

  • 監聽使用者下拉重新整理事件。
  • 需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。
  • 當處理完資料重新整理後，wx.stopPullDownRefresh可以停止當前頁面的下拉重新整理。

• onReachBottom: 上拉觸底

  • 監聽使用者上拉觸底事件。
  • 可以在app.json的window選項中或頁面配置中設定觸發距離onReachBottomDistance。
  • 在觸發距離內滑動期間，本事件只會被觸發一次。

index.json：

index.wxml：

index.js 重寫系統回撥函式onPullDownRefresh和onReachBottom：

執行效果顯示：可以執行onPullDownRefresh，但始終無法執行onReachBottom。經過一番折騰，最後發現：

如果頁面的內容未滿一屏，上拉的時候就無法觸發onReachBottom。

那麼有沒有其他替代方案呢？答案就是使用scrollview。

方式2:利用scrollview的屬性bindscrolltoupper 和 bindscrolltolower 實現。

wxml示例程式碼：

<scroll-view bindscroll="scroll" 
       bindscrolltolower="lower" 
       bindscrolltoupper="upper" 
       bindtouchstart="start" 
       bindtouchend="end" > 

    <view style="width:100%;height:100%" bindtouchmove="move">
        <block wx:for="{{words}}">  
                <view class="item-style">{{item}}</view>  
        </block>  
    </view>

</scroll-view>

然後，在js檔案編寫函式，處理相應事件即可。

總結：

1、如果單純實現“下拉重新整理”，請使用頁面的滾動，而不是 scroll-view ，這樣也能通過點選頂部狀態列回到頁面頂部

2、使用頁面的enablePullDownRefresh屬性，不能對頁面內某一區域/控制元件實現“下拉重新整理、上拉載入更多”功能。

3、若要實現“下拉重新整理、載入更多”，建議使用scrollview，因為可隨意定義位置、寬高。