小程序踩坑（三）-上拉加载和下拉刷新篇
今天又来说说小程序踩坑这个事情。还在小程序的坑中匍匐前行中。今天来说说下拉刷新和上拉加载这个。
做的是一个活动列表页,话说还是第一次做正常的小程序，第一次做还是在一年多前，不过那时候的那家公司先让我们做的是demo.也就是让我们先把页面写出来，数据接口这个我们需要先写json，但是后期由于各种原因导致写完的静态就那样放着，现在i还是第一次也有后台的小程序。哈哈哈。然后一直在坑中爬。言归正传。下面上图片。
就是这个列表页，
wxml文件
<view class="content">
<view wx:if="{{activeitem.length <=0}}">
<view class="activeImg"><image src="{{}}" class="noActiveImg"></image></view>
<view class="noActive">还没有任何活动</view>
</view>
<view class="active-item" wx:for="{{activeLitem}}" wx:for-index="idx" wx:for-item="item" id="{{item.id}}" bindtap="getId">
<view class="active-bg"><image class="active-img" src="{{item.cover}}"></image></view>
<view class="title">{{item.title}}</view>
<view class="active-name">{{item.remark}}</view>
<view class="time_read">
{{item.createTime}} ⋅ {{item.readTimes}}阅读
</view>
</view>
下面来看看js文件
Page({
/**
* 页面的初始数据
*/
data: {
//获取当前经纬度
longitude: 113.943189,//获取经度
latitude: 22.549001,//获取纬度
size:10,//每一页的条数
pagesNum:1,//默认的页数
activeLitem:[],//初始化活动列表
hasMore:false,//是否有更多的数据
dayBefore:1,//多少天前
},
//事件格式的转化---转化为多少天前
dateDiff: function (timestamp) {
// 补全为13位
var arrTimestamp = (timestamp + '').split('');
for (var start = 0; start < 13; start++) {
if (!arrTimestamp[start]) {
arrTimestamp[start] = '0';
}
}
timestamp = arrTimestamp.join('') * 1;
var minute = 1000 * 60;
var hour = minute * 60;
var day = hour * 24;
var halfamonth = day * 15;
var month = day * 30;
var now = new Date().getTime();
var diffValue = now - timestamp;
// 如果本地时间反而小于变量时间
if (diffValue < 0) {
return '不久前';
}
// 计算差异时间的量级
var monthC = diffValue / month;
var weekC = diffValue / (7 * day);
var dayC = diffValue / day;
var hourC = diffValue / hour;
var minC = diffValue / minute;
// 数值补0方法
var zero = function (value) {
if (value < 10) {
return '0' + value;
}
return value;
};
// 使用
if (monthC > 12) {
// 超过1年，直接显示年月日
return (function () {
var date = new Date(timestamp);
return date.getFullYear() + '年' + zero(date.getMonth() + 1) + '月' + zero(date.getDate()) + '日';
})();
} else if (monthC >= 1) {
return parseInt(monthC) + "月前";
} else if (weekC >= 1) {
return parseInt(weekC) + "周前";
} else if (dayC >= 1) {
return parseInt(dayC) + "天前";
} else if (hourC >= 1) {
return parseInt(hourC) + "小时前";
} else if (minC >= 1) {
return parseInt(minC) + "分钟前";
}
return '刚刚';
},
/**
* 生命周期函数--监听页面加载
*/
//点击事件拿到相应id的
getId:function(event){
console.log(event.currentTarget.id);
var id = event.currentTarget.id;
wx.navigateTo({
url:'/pages/findDetails/findDetails?id='+id,
})
},
//获取数据的接口
getData: function (num, size, longitude, latitude){
var that = this;
wx.request({
url:'https://api.ryjgb.net/filter/api/content/activity/list?',
method:'get',
data:{
'page':num,
'size':size,
'x': longitude,
'y': latitude
},
success:function(res){
setTimeout(function () {
wx.stopPullDownRefresh();
}, 500);
for(var i=0;i<res.data.content.length;i++){
var test = res.data.content[i];
test.remark = test.remark.substring(0, 50) + '...';
test.createTime = test.createTime;
test.createTime = that.dateDiff(test.createTime);
}
if (that.data.hasMore || res.data.content.length >=10 ){
that.setData({
activeLitem: this.data.activeLitem.concact(res.data.content)
});
}
else{
that.setData({
activeLitem: res.data.content
});
}
}
})
},
onLoad: function (options) {
//此处是获取用户的经纬度信息
var that = this;
wx.getLocation({
type: 'gcj02',
success: function(res) {
longitude: res.longitude;
latitude:res.latitude
},
});
that.getData(that.data.pagesNum, that.data.size, that.data.longitude, that.data.latitude);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log('下拉');
this.setData({
pageNum:1,
hasMore:false
})
this.getData(this.data.pagesNum, this.data.size, this.data.longitude, this.data.latitude);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log('上啦加载');
let {pageNum,hasMore} = this.data;
if(hasMore){
pageNum:pageNum+1;
this.getData(this.data.pagesNum, this.data.size, this.data.longitude, this.data.latitude);
}
else{
wx.stopPullDownRefresh();
}
//显示加载更多
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
主要是有一个日期转化的时间戳函数-需要转化为多少天前之类的。然后又是在一个for循环里面。
我的处理方法是
采用for循环：
看具体代码的实现过程：
for(var i=0;i<res.data.content.length;i++){
var test = res.data.content[i];
test.remark = test.remark.substring(0, 50) + '...';
test.createTime = test.createTime;
test.createTime = that.dateDiff(test.createTime);
}
哈哈哈，其实这个过程中由于我自己的马虎出现了很多bug。
首先将获取数据的接口啥的封装成一个函数，函数中你需要注意的是要判断是否还有数据。以及数据连接。等等地方都需要注意。
在手机上测试的时候发现下拉的时候那三个原点一直在在，只有当你手动往下滑动的时候才会隐藏。这个地方需要在成功回调里面加一个定时器来关闭这个刷新。
以上就是今天写的。哈哈哈哈。我的继续去改bug。加油。
Page({
/**
* 页面的初始数据
*/
data: {
//获取当前经纬度
longitude: 113.943189,//获取经度
latitude: 22.549001,//获取纬度
size:10,//每一页的条数
pagesNum:1,//默认的页数
activeLitem:[],//初始化活动列表
hasMore:false,//是否有更多的数据
dayBefore:1,//多少天前
},
//事件格式的转化---转化为多少天前
dateDiff: function (timestamp) {
// 补全为13位
var arrTimestamp = (timestamp + '').split('');
for (var start = 0; start < 13; start++) {
if (!arrTimestamp[start]) {
arrTimestamp[start] = '0';
}
}
timestamp = arrTimestamp.join('') * 1;
var minute = 1000 * 60;
var hour = minute * 60;
var day = hour * 24;
var halfamonth = day * 15;
var month = day * 30;
var now = new Date().getTime();
var diffValue = now - timestamp;
// 如果本地时间反而小于变量时间
if (diffValue < 0) {
return '不久前';
}
// 计算差异时间的量级
var monthC = diffValue / month;
var weekC = diffValue / (7 * day);
var dayC = diffValue / day;
var hourC = diffValue / hour;
var minC = diffValue / minute;
// 数值补0方法
var zero = function (value) {
if (value < 10) {
return '0' + value;
}
return value;
};
// 使用
if (monthC > 12) {
// 超过1年，直接显示年月日
return (function () {
var date = new Date(timestamp);
return date.getFullYear() + '年' + zero(date.getMonth() + 1) + '月' + zero(date.getDate()) + '日';
})();
} else if (monthC >= 1) {
return parseInt(monthC) + "月前";
} else if (weekC >= 1) {
return parseInt(weekC) + "周前";
} else if (dayC >= 1) {
return parseInt(dayC) + "天前";
} else if (hourC >= 1) {
return parseInt(hourC) + "小时前";
} else if (minC >= 1) {
return parseInt(minC) + "分钟前";
}
return '刚刚';
},
/**
* 生命周期函数--监听页面加载
*/
//点击事件拿到相应id的
getId:function(event){
console.log(event.currentTarget.id);
var id = event.currentTarget.id;
wx.navigateTo({
url:'/pages/findDetails/findDetails?id='+id,
})
},
//获取数据的接口
getData: function (num, size, longitude, latitude){
var that = this;
wx.request({
url:'https://api.ryjgb.net/filter/api/content/activity/list?',
method:'get',
data:{
'page':num,
'size':size,
'x': longitude,
'y': latitude
},
success:function(res){
setTimeout(function () {
wx.stopPullDownRefresh();
}, 500);
for(var i=0;i<res.data.content.length;i++){
var test = res.data.content[i];
test.remark = test.remark.substring(0, 50) + '...';
test.createTime = test.createTime;
test.createTime = that.dateDiff(test.createTime);
}
if (that.data.hasMore || res.data.content.length >=10 ){
that.setData({
activeLitem: this.data.activeLitem.concact(res.data.content)
});
}
else{
that.setData({
activeLitem: res.data.content
});
}
}
})
},
onLoad: function (options) {
//此处是获取用户的经纬度信息
var that = this;
wx.getLocation({
type: 'gcj02',
success: function(res) {
longitude: res.longitude;
latitude:res.latitude
},
});
that.getData(that.data.pagesNum, that.data.size, that.data.longitude, that.data.latitude);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log('下拉');
this.setData({
pageNum:1,
hasMore:false
})
this.getData(this.data.pagesNum, this.data.size, this.data.longitude, this.data.latitude);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log('上啦加载');
let {pageNum,hasMore} = this.data;
if(hasMore){
pageNum:pageNum+1;
this.getData(this.data.pagesNum, this.data.size, this.data.longitude, this.data.latitude);
}
else{
wx.stopPullDownRefresh();
}
//显示加载更多
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
