微信小程序下拉刷新上拉加载的两种实现方法使用评测

直奔主题：如果当前页面含有scroll-view，请注意： 
scroll-view高度如果设置为屏幕高度时，建议采用在scroll-view里设定bindscrolltoupper和bindscrolltolower方式，因为如果这种情况下仍然使用onPullDownRefresh和onReachBottom方法，会存在监测不到上拉刷新事件的问题， 
代码如下：

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

1. //test.js
2. //获取应用实例
3. Page
4. ({
5. data: {
6. },
7. onPullDownRefresh: function(e) {
8. console.log('使用全局方法滑动到了页面顶部');
9. },
10. onReachBottom: function(e) {
11. console.log('使用全局方法滑动到了页面底部');
12. }
13. }

1.  
2. /* pages/test/test.wxss */
3. scroll-view {
4. height: 1334rpx;
5. width: 748rpx;
6. border: solid 1rpx black;
7. }
8.  
9. scroll-view view {
10. height: 600rpx;
11. width: 750rpx;
12. }

效果如图所示： 

因此，建议在布局时，如果scroll-view组件高度设置为了当前屏幕高度，还是要用scroll-view组件的bindscrolltoupper和bindscrolltolower方式，代码如下：

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

1. //test.js
2. Page
3. ({
4. data: {
5. },
6. DingBu: function(e) {
7. console.log('使用局部方法滑动到了页面顶部');
8. },
9. DiBu: function(e) {
10. console.log('使用局部方法滑动到了页面底部');
11. }
12. })

1. /* pages/test/test.wxss */
2. scroll-view {
3. height: 1334rpx;
4. width: 748rpx;
5. border: solid 1rpx black;
6. }
7.  
8. scroll-view view {
9. height: 600rpx;
10. width: 750rpx;
11. }

效果如图所示：