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

lvxiangan發表於2018-04-25

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

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

  • onPullDownRefresh: 下拉重新整理

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

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

index.json:

{
"navigationBarTitleText" : "交易記錄",
"enablePullDownRefresh" : true
}


index.wxml:

<view class="container">
測試下拉重新整理、上拉載入更多
</view>

<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore-tips">正在載入</view>
</view>

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

// 下拉重新整理
onPullDownRefresh: function () {
console.log("下拉重新整理");
// 頁面相關事件處理函式--監聽使用者下拉動作
wx.showNavigationBarLoading() //在標題欄中顯示載入

//模擬載入
setTimeout(function () {
// complete
wx.hideNavigationBarLoading() //完成停止載入
wx.stopPullDownRefresh() //停止下拉重新整理
}, 1500);
},

//載入更多
onReachBottom: function () {
console.log('載入更多');
},

執行效果顯示:可以執行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,因為可隨意定義位置、寬高。




相關文章