来个上拉刷新,解决一下上拉问题。上拉小伙伴除了用微信小程序自带的onReachBottom外,最多用的就是scroll-view的上拉加载啦。但是呢,scroll-view上拉加载会一到底部就不断的触发这个事件,怎么办才能巧妙的解决这个问题呢?问了度娘依旧没有解决问题,所以跟小伙伴研究了一下,得到下面方法,希望对小伙伴有用。
<view class='allOrder'>
<scroll-view class='scroller' scroll-y style="height:{{scrollHeight}}px;" bindscrolltolower="LoadMore">
<view class='show-one-order' wx:for="{{list}}" wx:key="{{index}}" data-index='{{index}}' catchtap='getOrderDetail'>
<!-- 展示一张票的img -->
<view class='order-one-img'>
<image wx:if='{{item.photos[0]}}' src='{{item.photos[0]}}' mode='aspectFill'></image>
</view>
</view>
<view class="nonedata {{noneData== false?'hidden':''}}">没有更多数据了 ~~~</view>
</scroll-view>
</view>
js 部分内容
// 引入请求(已封装好的函数在上一篇博客)
var util = require('../../../utils/util.js');
Page({
/**
* 页面的初始数据
*/
data: {
flag: 1,//得到转换的数据,1是全部
scrollHeight: 0,//得到手机屏幕高度
list: [],//得到列表
page: 1,//得到当前的页数
limit: 10,//得到当前的条数
lastLoadTime: 0,//得到上一次加载的时间
loadMoreIs: false,//监控是否是下拉加载更多
noneData: false,//得到是否显示没有更多数据
totalPage: 0,//得到总的页数
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
success: function (res) {
var height = res.windowHeight - 54;
that.setData({ scrollHeight: height });
}
})
this.getData();//得到相应数据
},
getData: function (e) {
var dataType = this.data.flag;
var that = this;
//数据请求部分
util.HttpRequst(true, "order/orderList", 1, wx.getStorageSync('sessionId'),{
"limit": that.data.limit,
"page": that.data.page,
"type": dataType
},"GET" , function (res) {
if (res.code == 200) {
var List = res.content.list;
that.setData({ totalPage: res.content.totalPage });
if (List.length == 0 || List.length < that.data.limit || (that.data.totalPage == that.data.page && List.length % that.data.limit ==0)) {
that.setData({ noneData: true });
}
if (that.data.loadMoreIs == false) {
that.setData({ list: List });
} else {
var shanList = that.data.list.concat(List);
that.setData({ list: shanList });
}
console.log(res);
}
})
},
/**
* 加载更多
*/
LoadMore: function (e) {
var that = this;
var currentTime = e.timeStamp;//得到当前加载的时间
var lastTime = this.data.lastLoadTime;//得到上一次加载的时间
if (currentTime - lastTime < 300) {
console.log("时间间隔太短,不能算下拉加载");
return;
}
var newPage = this.data.page + 1;
console.log("当前页"+newPage)
if (that.data.totalPage >= newPage) {
this.setData({
page: newPage,
lastLoadTime: e.timeStamp,
loadMoreIs: true
});
this.getData();
}
},
})
最后唠叨一下getData里面包含了下拉加载时候如果遇到加载到最后的情况时显示更多,一并复制粘贴上来了,如不需要可以不看,只看loadMore就好。总结就是拿时间戳来看看是不是多次到底部,多次的话时间点过于断的话将不进行请求