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

　　直奔主题：如果当前页面含有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 ，这样也能通过点击顶部状态栏回到页面顶部