微信小程序上拉刷新和下拉加载2种方法实现，onPullDownRefresh，scroll-view使用

一、XXX.json开启下拉刷新

{
"enablePullDownRefresh": true
}

二、XXX.js

onPullDownRefresh实现下拉刷新

手动下拉触发onPullDownRefresh函数

//product2获取数据
loadProduct2: function () {
var that = this;
wx.request(OBJECT)//发起网络请求。使用前请先阅读说明。
},

//下拉刷新
onPullDownRefresh:function(){
console.log("刷新");

wx.setNavigationBarTitle({
title: '刷新中……'
})//动态设置当前页面的标题。

wx.showNavigationBarLoading();//在当前页面显示导航条加载动画。

this.loadProduct2();//重新加载产品信息

wx.hideNavigationBarLoading();//隐藏导航条加载动画。

wx.stopPullDownRefresh();//停止当前页面下拉刷新。

console.log("关闭");

wx.setNavigationBarTitle({
title: '寸草心+'
})//动态设置当前页面的标题。

}

wx.startPullDownRefresh(Object object)

基础库 1.5.0 开始支持，低版本需做兼容处理。

开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

参数

Object object

属性	类型	必填	说明
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

wx.startPullDownRefresh()

scroll-view 实现上拉刷新和下拉加载

注：转自---昵称：苏桃子~http://www.cnblogs.com/simba-lkj/p/6274232.html

橙子UI：添加标注，让小白更易懂

一、XXX.wxml文件

<view class="container" style="padding:0rpx">

<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
<view class="item" wx:for="{{list}}">
<image class="img" src="{{item.pic_url}}"></image>
<view class="text">
<text class="title">{{item.name}}</text>
<text class="description">{{item.short_description}}</text>
</view>
</view>
</scroll-view>
<view class="body-view">
<loading hidden="{{hidden}}" bindchange="loadingChange">
加载中...
</loading>
</view>
</view>

二、XXX.wxss文件

/* pages/ceshi/ceshi.wxss */

.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}

.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}

.userinfo-nickname {
color: #aaa;
}

.usermotto {
margin-top: 200px;
}

/**/

scroll-view {
width: 100%;
}

.item {
width: 90%;
height: 300rpx;
margin: 20rpx auto;
background: brown;
overflow: hidden;
}

.item .img {
width: 430rpx;
margin-right: 20rpx;
float: left;
}

.title {
font-size: 30rpx;
display: block;
margin: 30rpx auto;
}

.description {
font-size: 26rpx;
line-height: 15rpx;
}
三、XXX.js文件

// pages/ceshi/ceshi.js
var url = "http://www.imooc.com/course/ajaxlist";
var page = 0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;

// 请求数据
var loadMore = function (that) {
that.setData({
hidden: false
});
wx.request({
url: url,
data: {
page: page,
page_size: page_size,
sort: sort,
is_easy: is_easy,
lange_id: lange_id,
pos_id: pos_id,
unlearn: unlearn
},
success: function (res) {

var list = that.data.list;
console.info("list数据长度：" + list.length);
for (var i = 0; i < res.data.list.length; i++) {
list.push(res.data.list[i]);
}
that.setData({
list: list
});
console.info("之前page==：" + page);
page++;
console.info("目前page==：" + page);
that.setData({
hidden: true
});
}
});
}
Page({
/**
* 页面的初始数据
*/
data: {
hidden: true,
list: [],
scrollTop: 0,
scrollHeight: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 这里要注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
scrollHeight: res.windowHeight
});
console.log("设备高度scrollHeight==" + res.windowHeight);

}

});

loadMore(that);

},
//页面滑动到底部
bindDownLoad: function () {
var that = this;
loadMore(that);
console.log("lower");
},
scroll: function (event) {
//该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
this.setData({
scrollTop: event.detail.scrollTop
});
console.log("滚动时触发scrollTop==" + event.detail.scrollTop);
},
topLoad: function (event) {
// 该方法绑定了页面滑动到顶部的事件，然后做上拉刷新
page = 0;
this.setData({
list: [],
scrollTop: 0
});
loadMore(this);
console.log("重新加载");
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
参考原文地址：https://blog.csdn.net/cplvfx/article/details/78355866