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

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

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

wxml

    .........

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

    ..........

js

onPullDownRefresh: function() {
    // Do something when pull down.
     console.log('刷新');
 },

 onReachBottom: function() {
    // Do something when page reach bottom.
     console.log('circle 下一页');
 },

官方文档

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

注意：如果出现有时候滑动到底部没有触发到底的函数，需要加上一个属性lower-threshold(距离底部多远时触发)
注意：使用第二种方法绑定的触发函数，可能会多次触发这个绑定函数，需自己来阻止多次触发(思路：设置一个全局变量为false，在上拉到底的时候进行判断，为true时阻止调取列表接口，然后，在请求接口的时候将变量设置true，成功获取失败之后再将变量设置为false)
wxml

  banner
  
        
            
                流水
            
            
                当前无流水记录~
            
            
                
                    
                        {{item.text}}
                    
                    
                        {{item.time}}
                    
                
                
                    {{item.amount}}
                
            
            没有更多了~
        
    

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