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

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

一、利用"onPullDownRefresh"和"onReachBottom"方法

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

官方文档

根据第二种方法，写个栗子~~

注意：使用第二种方法绑定的触发函数，可能会多次触发这个绑定函数，需自己来阻止多次触发(思路：设置一个全局变量为false，在上拉到底的时候进行判断，为true时阻止调取列表接口，然后，在请求接口的时候将变量设置true，成功获取失败之后再将变量设置为false)
wxml

  <view class="top">banner</view>
  <scroll-view scroll-y="{{true}}" bindscrolltolower="lower" class="pull-down-load">
        <view class="bill">
            <view class="bill-title">
                流水
            </view>
            <view class="no-data" wx:if="{{!data.record.rows}}">
                当前无流水记录~
            </view>
            <view wx:for="{{datalist}}" wx:key="itemid" class="bill-list">
                <view class="bill-list-left">
                    <view class="recommend-text">
                        {{item.text}}
                    </view>
                    <view class="recommend-date">
                        {{item.time}}
                    </view>
                </view>
                <view class="bill-list-right">
                    {{item.amount}}
                </view>
            </view>
            <view wx:if="{{nomore}}" class="no-more">没有更多了~</view>
        </view>
    </scroll-view>

wxss

.top {
    height: 20vh;
}

.pull-down-load {
    height: 80vh;
}

js

Page({
    data:{
    page:1
},
    stopLoadMoreTiem：false，// 阻止多次触发 需要的变量
    lower: function () {
        var that = this;
        if (that. stopLoadMoreTiem) {
            return;
        }
        this.setData({
            page: this.data.page + 1  //上拉到底时将page+1后再调取列表接口
        });
        that.getDealList();
    },
    getDealList: function () {
        var that = this;
        that.stopLoadMoreTiem = true;
        request({
            url: '{url}',
            method: 'POST',
            data: {
                page: this.data.page,
                pageSize: this.data.pageSize
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            success: function (res) {
                that.stopLoadMoreTiem = false;
                if (+res.data.code === 0) {
                    that.setData({
                        nomore: false
                    });
                    if (that.data.page === 1) {
                        that.setData({
                            data: res.data.data,
                            datalist: res.data.data.record.rows
                        });
                    } else {
                        var newData = that.data.datalist.concat(res.data.data.record.rows);
                        if (that.data.page > res.data.data.record.page_count) {

                            that.setData({
                                nomore:true
                            });
                            return;
                        }
                        that.setData({
                            datalist: newData,
                        });
                    }
                }
            },
            fail: function () {
                that.stopLoadMoreTiem = false;
            },
        });
    },
})

如果当你滚动到最后一页，此时在做了其他操作，需要重新获取列表接口，此时滚动条位置还在底部 （解决：在操作单击“确定”的时候，将渲染页面的数组清空）

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