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

微信小程序下拉刷新上拉加载的两种实现方法，1、利用"onPullDownRefresh"和"onReachBottom"方法实现小程序下拉刷新上拉加载，2、在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉刷新上拉加载。

 利用"onPullDownRefresh"和"onReachBottom"方法

在js文件里直接写"onPullDownRefresh"和"onReachBottom"方法即可；

文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=20161107

wxml

<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 下一页');
 },

 在scroll-view里设定bindscrolltoupper和bindscrolltolower

在scroll-view里设定bindscrolltoupper和bindscrolltolower，然后在js里写好触发事件后对应的方法。[注意，使用这个模式一定要设置scroll-view的高度，100%不知道为什么设置后没效果，建议使用100vh]

文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161107

wxml

 <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 下一页');
 },

原文：http://www.jianshu.com/p/150ab73f1fa7

本文链接：微信小程序下拉刷新上拉加载的两种实现方法http://www.51xuediannao.com/xiaochengxu/111311G2016.html

备注：

scroll-view 组件，用 bindscrolltolower 事件，然后在js里写好触发事件后对应的方法。[注意，使用这个模式一定要设置scroll-view的高度，100%不知道为什么设置后没效果，建议使用100vh];

view 组件，用 onReachBottom 事件。

因为 bindscrolltolower 事件，需要在 bindscrolltolower 事件中定义 高度，有时高度定的不合适，还没效果，所以我用的onReachBottom 方法