今天又來說說小程序踩坑這個事情。還在小程序的坑中匍匐前行中。今天來說說下拉刷新和上拉加載這個。
做的是一個活動列表頁,話說還是第一次做正常的小程序，第一次做還是在一年多前，不過那時候的那家公司先讓我們做的是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 () {
}
})