微信小程序下拉刷新上拉加载的两种实现方法，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 下一页');
},
根据第二种方法，写个栗子~~
注意：如果出现有时候滑动到底部没有触发到底的函数，需要加上一个属性lower-threshold(距离底部多远时触发)
注意：使用第二种方法绑定的触发函数，可能会多次触发这个绑定函数，需自己来阻止多次触发(思路：设置一个全局变量为false，在上拉到底的时候进行判断，为true时阻止调取列表接口，然后，在请求接口的时候将变量设置true，成功获取失败之后再将变量设置为false)
wxml
<view class="top">banner</view>
<scroll-view scroll-y="{{true}}" bindscrolltolower="lower" lower-threshold="50" 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;
},
});
},
})
如果当你滚动到最后一页，此时在做了其他操作，需要重新获取列表接口，此时滚动条位置还在底部 （解决：在操作单击“确定”的时候，将渲染页面的数组清空）
