从零开始做小程序（五）——触底加载、下拉刷新

一、触底加载

小程序和后台系统相对比：
相似的是：后台系统中是有表格分页的、点击页码去请求接口得到其他页的数据，而小程序是通过触底加载去请求接口得到分页数据。
不同的是：后台系统不需要自己对数据进行存储处理，后台请求得到了什么数据就显示什么数据，而 小程序需要把之前请求到的分页数据进行存储并拼接之后请求到的分页数据。

1.1、

触底加载不需要设置什么，只需要在页面的js中监听onReachBottom函数

<!--pages/article/article.wxml-->
<text>pages/article/article.wxml</text>
<view>
  <block wx:for="{{articleList}}" wx:key="articleId">
    <view>显示内容...</view>
  </block>
  <view class="loading" wx:if="{{loading}}" hidden="{{!show}}">
    <van-loading type="spinner" size="24px" />
    <view style="margin-left:25rpx">正在加载</view>
  </view>
  <view class="loaded" wx:else hidden="{{!show}}">加载完成</view>
  <view class="empty" wx:if="{{isEmpty}}">
    <empty />
  </view>
</view>

// pages/article/article.js
let timeout//定时器

Page({

  /**
   * 页面的初始数据
   */
  data: {
    pageIndex: 1,//当前第几页
    pageRows: 10,//每页条数
    show: false,//是否触发触底加载
    loading: true,//数据是否在加载中
    articleList: [],//文章列表
    isEmpty: false,//是否显示暂无数据
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getInfoList()
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    clearTimeout(timeout)
    timeout = null
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.setData({
      show: true,
    })

    //延时加载
    timeout = setTimeout(() => {
      this.getInfoList()
    }, 500)
  },

  //假设getInfo为后台接口
  //后台数据接口类型为
  /**
   * {
   *  code:0,
   *  data : {
   *      list:[],
   *      pager:{}
   *  }
   * }
   */
  getInfoList() {
    const { pageIndex, pageRows } = this.data;
    getInfo({ pageIndex, pageRows }).then(res => {
      if (res.code == 0 && res.data) {
        if (!res.data.list) return

        let currentIndex = res.data.pager.pageIndex;
        //后台返回的当前第几页
        let totalRows = res.data.pager.totalRows;
        //后台返回的总记录数
        if (this.data.articleList.length === totalRows) {
          if (totalRows === 0) {
            this.setData({
              isEmpty: true
            })
          }
          //如果数据已经加载完成，不让其继续执行
          return
        }

        let tempList = JSON.parse(JSON.stringify(res.data.list))
        let nextIndex = tempList.length < 10 ? currentIndex : currentIndex + 1;
        //如果最后一页数据没有加载完成，再次触底还是请求该页数据
        let arrayList = [...this.data.articleList, ...tempList]
        this.setData({
          articleList: arrayList,
          pageIndex: nextIndex,
          loading: arrayList.length != totalRows,
          isEmpty: arrayList.length <= 0
        })
      }
    })
  }

})

二、下拉刷新

2.1、在json文件中开启enablePullDownRefresh

2.1、代码

<!--pages/article/article.wxml-->
<text>pages/article/article.wxml</text>
<loading show="{{showLoading}}" />
<view>
  <block wx:for="{{articleList}}" wx:key="articleId">
    <view>显示内容...</view>
  </block>
</view>

// pages/article/article.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    pageIndex: 1,//当前第几页
    pageRows: 10,//每页条数
    articleList: [],//文章列表
    showLoading: true,//刷新loading,刚进入界面loading，得到数据后设为false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getInfoList()
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData(
      {
        articleList: [],
        pageIndex: 1,
        showLoading: true,
      }, () => {
        this.getInfoList()
      }
    )
  },

  //假设getInfo为后台接口
  //后台数据接口类型为
  /**
   * {
   *  code:0,
   *  data : {
   *      list:[],
   *      pager:{}
   *  }
   * }
   */
  getInfoList() {
    const { pageIndex, pageRows } = this.data;
    getInfo({ pageIndex, pageRows }).then(res => {
      this.setData({ showLoading: false })
      wx.stopPullDownRefresh() //得到数据后停止当前页面的下拉刷新
      if (res.code == 0 && res.data) {
        //数据处理
      }
    }).catch(() => {
      //当请求接口报错的时候不让其一直处于loading状态
      this.setData({ showLoading: false })
    })
  }

})