今天又来说说小程序踩坑这个事情。还在小程序的坑中匍匐前行中。今天来说说下拉刷新和上拉加载这个。
做的是一个活动列表页,话说还是第一次做正常的小程序，第一次做还是在一年多前，不过那时候的那家公司先让我们做的是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 () {
}
})
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
