微信小程式中的下拉刷新和上拉載入的實作方法詳解

微信小程式下拉刷新上拉加載的兩種實作方法，1、利用"onPullDownRefresh"和"onReachBottom"方法實現小程式下拉刷新上拉加載，2、在scroll-view裡設定bindscrolltoupper和bindscrolltolower實現微信小程式下拉刷新上拉加載。

1. 利用"onPullDownRefresh"和"onReachBottom"方法

在js檔案裡直接寫"onPullDownRefresh"和"onReachBottom"方法即可；

xml

################xml###

<scroll-view scroll-y = true >    
    .........
</scroll-view>

###js###

onPullDownRefresh: function() {
    // Do something when pull down.
     console.log('刷新');
 },
 onReachBottom: function() {
    // Do something when page reach bottom.
     console.log('circle 下一页');
 },

###2. 在scroll-view裡設定bindscrolltoupper和bindscrolltolower######在scroll-view裡設定bindscrolltoupper和bindscrolltolower，然後在js裡寫好觸發事件後對應的方法。 [注意，使用這個模式一定要設定scroll-view的高度，100%不知道為什麼設定後沒效果，建議使用100vh]######xml###

<scroll-view scroll-y = true bindscrolltolower="loadMore" bindscrolltoupper="refesh">
    ..........
</scroll-view>

###js####

onPullDownRefresh: function() {
    // Do something when pull down.
     console.log('刷新');
 },
 onReachBottom: function() {
    // Do something when page reach bottom.
     console.log('circle 下一页');
 },

## #######

以上是微信小程式中的下拉刷新和上拉載入的實作方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！