zoukankan      html  css  js  c++  java
  • 小程序踩坑(三)-上拉加载和下拉刷新篇

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

    做的是一个活动列表页,话说还是第一次做正常的小程序,第一次做还是在一年多前,不过那时候的那家公司先让我们做的是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 () {
     
    }
    })
  • 相关阅读:
    递归打印99乘法表
    递归对一个数组求和
    在控制台打印出99乘法表
    ie9以下浏览器不兼容placeholder的解决方案
    二列布局 左边固定宽度 右边响应
    Scala并发编程实战初体验及其在Spark源码中的应用解析之Scala学习笔记-56
    Scala中隐式转换内幕操作规则揭秘、最佳实践及其在Spark中的应用源码解析之Scala学习笔记-55
    Scala中隐式对象代码实战详解之Scala学习笔记-54
    Scala中隐式类代码实战详解之Scala学习笔记-53
    Scala中上下文界定内幕中的隐式参数与隐式参数的实战详解及其在Spark中的应用源码解析之Scala学习笔记-52
  • 原文地址:https://www.cnblogs.com/zylily/p/9599847.html
Copyright © 2011-2022 走看看