小程序踩坑（三）-上拉加载和下拉刷新篇-白红宇

小程序踩坑（三）-上拉加载和下拉刷新篇

阅读量：5133 次

发布时间：2019-06-13

本文共 8239 字，大约阅读时间需要 27 分钟。

今天又来说说小程序踩坑这个事情。还在小程序的坑中匍匐前行中。今天来说说下拉刷新和上拉加载这个。

做的是一个活动列表页,话说还是第一次做正常的小程序，第一次做还是在一年多前，不过那时候的那家公司先让我们做的是demo.也就是让我们先把页面写出来，数据接口这个我们需要先写json，但是后期由于各种原因导致写完的静态就那样放着，现在i还是第一次也有后台的小程序。哈哈哈。然后一直在坑中爬。言归正传。下面上图片。

就是这个列表页，

wxml文件

<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>

{

{item.createTime}} ⋅ {

{item.readTimes}}阅读

</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 () { 
      } 
      }) 

转载于:https://www.cnblogs.com/zylily/p/9599847.html

你可能感兴趣的文章