下拉刷新、上拉加载更多（微信小程序）

下拉刷新、上拉加载更多（微信小程序）

  需求分析

      微信小程序开发，经常需要下拉刷新、上拉加载更多进行网络请求。主要的需求如下：

      （1）页面初始化时，自动下拉刷新，下拉操作时，激发下拉刷新，下拉刷新的同时，更新、显示数据。

      （2）当滑动到底部上拉时，加载更多数据，如果没有更多的数据，则提示“没有更多啦”。

      （3）交互反馈，给用户一个良好的体验。

 

  实现逻辑

     （1）用户下拉操作时，会激发onPullDownRefresh 函数。在onPullDownRefresh 函数中发起网络请求，可以实现下拉刷新，更新、显示数据。在生命周期函数onLoad中， 调用onPullDownRefresh 函数，实现页面初始化时，自动下拉刷新。

     （2）当滑动到底部上拉时，会激发onReachBottom函数。在onReachBottom函数中发起网络请求，拼接地址，实现第1次上拉加载第2页；第n次上拉，加载第(n + 1)页。如果没有更多的数据，则提示“没有更多啦”。

     （3）交互反馈：网络请求之前，使用消息提示框提示“刷新数据”、或“加载更多”，请求之后隐藏提示。下拉刷新请求之后，结束下拉刷新。

        另外，在onPullDownRefresh 函数中，将页面数据（dataList）设置为第一页数据，将页面变量（page）设置为初始值。如果用户上拉加载更多后，又下拉刷新，那么清除原来的数据，只显示新的第一页的数据，当用户再次滑动上拉时，再加载更多。

  数据接口

      第一页的数据接口：

   http://app.api.autohome.com.cn/autov5.0.0/news/newslist-pm1-c0-nt1-p1-s30-l0.json

  第n页的数据接口（lasttime是已下载数据最后一条的lasttime）：
  http://app.api.autohome.com.cn/autov5.0.0/news/newslist-pm1-c0-nt1-pn-s30-llasttime.json

 

  项目源码

      1、JSON文件，在window选项中开启enablePullDownRefresh

"enablePullDownRefresh": true

      2、JS文件

// 第一页数据接口
var urlPage1 = "http://app.api.autohome.com.cn/autov5.0.0/news/newslist-pm1-c0-nt1-p1-s30-l0.json";
// 定义page变量，用于实现加载更多
var page = 1;
Page({
  data: {
    dataList: []
  },
  onLoad: function (options) {
    // 调用下拉刷新函数
    this.onPullDownRefresh()
  },
  // 定义onPullDownRefresh 函数，用户下拉操作时会激发
  onPullDownRefresh: function () {
    // 开启消息提示框
    wx.showToast({
      title: '刷新数据',
      icon: 'loading',
      duration: 10000
    })
    var that = this;
    wx.request({
      url: urlPage1,
      data: {},
      method: 'GET',
      success: function (res) {
        // 将页面数据（dataList）设置为第一页数据，将页面变量（page）设置为初始值。
        that.setData({
          dataList: res.data.result.newslist
        });
        page = 1;
      },
      complete: function () {
        // 结束下拉刷新shu刷新
        // 隐藏提示框
        wx.stopPullDownRefresh()
        setTimeout(function () {
          wx.hideToast()
        }, 800)
      }
    })
  },
  // 定义onReachBottom函数，当视图滑动到底部上拉时激发
  onReachBottom: function () {
    // 因为分页加载的数据太多，无法模拟没有数据的情况，所以使用page >= 4来模拟。
    if (page < 4) {
      // 已下载数据的最后一条的lasttime
      var lasttime = this.data.dataList[this.data.dataList.length - 1].lasttime;
      var path = 'http://app.api.autohome.com.cn/autov5.0.0/news/newslist-pm1-c0-nt1-p' + (page + 1) + '-s30-l' + lasttime + '.json';
      console.log(path);
      wx.showToast({
        title: '加载更多',
        icon: 'loading',
        duration: 10000
      })
      var that = this;
      wx.request({
        url: path,
        data: {},
        method: 'GET',
        success: function (res) {
          // 将本次下载的数据，添加到dataList
          that.setData({
            dataList: that.data.dataList.concat(res.data.result.newslist)
          });
          // 下载数据时，使用（page + 1），下载数据成功时，将page += 1，可以实现第n次上拉，加载第(n + 1)页。
          page += 1;
        },
        complete: function () {
          setTimeout(function () {
            wx.hideToast()
          }, 800)
        }
      })
      //模拟没有跟多了
    } else {
      wx.showToast({
        title: '没有更多啦',
        icon: 'loading',
        duration: 1000
      })
    }
  }
})

      3、WXML文件

<block wx:for='{{dataList}}'>
  <view class='cell'>
    <image src="{{item.smallpic}}"></image>
    <view class='right-view'>
      <text class='title'>{{item.title}}</text>
      <view class='right-view-bottom'>
        <text class='time'>{{item.time}}</text>
        <text class='replycount'>{{item.replycount}}评论</text>
      </view>
    </view>
  </view>
</block>

      4、WXSS文件

.cell {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid lightgray;
}

image {
  width: 200rpx;
  height: 140rpx;
  margin-right: 20rpx;
}

.right-view {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.right-view-bottom {
  font-size: 30rpx;
}

.title {
  font-size: 38rpx;
}

.replycount {
  float: right;
}