微信小程序下拉刷新上拉加載的兩種實現方法使用評測

　　直奔主題：如果當前頁面含有scroll-view，請注意：scroll-view高度如果設置為屏幕高度時，建議采用在scroll-view里設定bindscrolltoupper和bindscrolltolower方式，因為如果這種情況下仍然使用onPullDownRefresh和onReachBottom方法，會存在監測不到上拉刷新事件的問題，代碼如下：

<!--test.wxml-->
<view>
  <scroll-view scroll-y="true">
    <view style="background-color:red">1</view>
    <view style="background-color:blue">2</view>
    <view style="background-color:green">3</view>
  </scroll-view>
</view>

//test.js
//獲取應用實例
Page
    ({
        data: {
        },
        onPullDownRefresh: function(e) {
            console.log('使用全局方法滑動到了頁面頂部');
        },
        onReachBottom: function(e) {
            console.log('使用全局方法滑動到了頁面底部');
        }
    }

/* pages/test/test.wxss */
scroll-view {
  height: 1334rpx;
  width: 748rpx;
  border: solid 1rpx black;
}

scroll-view view {
  height: 600rpx;
  width: 750rpx;
}

 

　　效果如圖所示：

　　因此，建議在布局時，如果scroll-view組件高度設置為了當前屏幕高度，還是要用scroll-view組件的bindscrolltoupper和bindscrolltolower方式，代碼如下：

<!--test.wxml-->
<view>
  <scroll-view scroll-y="true" bindscrolltoupper="DingBu" bindscrolltolower="DiBu">
    <view style="background-color:red">1</view>
    <view style="background-color:blue">2</view>
    <view style="background-color:green">3</view>
  </scroll-view>
</view>

//test.js
Page
    ({
        data: {
        },
        DingBu: function(e) {
            console.log('使用局部方法滑動到了頁面頂部');
        },
        DiBu: function(e) {
            console.log('使用局部方法滑動到了頁面底部');
        }
    })

/* pages/test/test.wxss */
scroll-view {
  height: 1334rpx;
  width: 748rpx;
  border: solid 1rpx black;
}

scroll-view view {
  height: 600rpx;
  width: 750rpx;
}

 

　　效果如圖所示：

　　附學習鏈接：http://www.cnblogs.com/simba-lkj/p/6274232.html

　　附官方說明：

　　Bug & Tip

1. tip: 請勿在 scroll-view 中使用 textarea、map、canvas、video 組件
2. tip: scroll-into-view 的優先級高於 scroll-top
3. tip: 在滾動 scroll-view 時會阻止頁面回彈，所以在 scroll-view 中滾動，是無法觸發 onPullDownRefresh
4. tip: 若要使用下拉刷新，請使用頁面的滾動，而不是 scroll-view ，這樣也能通過點擊頂部狀態欄回到頁面頂部