uniapp（小程序）加载更多（LoadMore）在列表上的应用和刷新逻辑完善

活动列表应用loadMore应用以及刷新逻辑完善

获取列表的方法会有3种状态

1. 第一种是onLoad时，首屏的1页5条。
2. 第二种是加载更多触发的n页5条。
3. 以及第三种，当我们离开页面去往其他页面再回到列表页进行刷新触发的1页n条。

首先先说加载更多的逻辑

• onLoad 里我们进行获取列表的第一种状态
  init 是为了防止onLoad和onShow在第一种状态下重复获取列表数据做的限制。
• onReachBottom是小程序当页面滑到最底部时触发的事件，我们通过该事件获取更多的列表数据。
• 首屏数据获取完成后，当我们下拉获取更多时，触发了onReachBottom ，此时的flag为false；
  flag是为了防止onReachBottom和onShow在第三种状态下重复获取列表数据做的限制。
• getActivityData方法中有两个参数 initList 和 nowPageSize ，initList默认状态下为false，当其为true是，是在onLoad首次调用该方法时使用的。其余状态下page会随着调用次数不断加1，数据也会跟着页码的获取使用concat方法不断累加进原列表中。nowPageSize会在第三种状态下使用。

然后是列表的刷新逻辑

• 当我们离开页面时会触发onHide，我们在onHide中讲当前的页码赋值给我们的beforePage
  (该方法只适用于不关闭当前页面进行跳转的页面，如果使用redirectTo等关闭当前页面跳转的方式，这里还是需要使用store进行储存页码的)
• 当我们返回页面时，此时只会触发onShow，我们使用了flag阻止了意外情况发生导致重复获取列表数据。这时调用getActivityData，我们传入了true和未跳转前数据列表中的数据数量。如果跳转前我们以及有10条数据在列表中，这时的搜索条件则为page=1，pageSize=10，此时我们的列表数以及进行了刷新。然后我们将原来的下一次搜索的页码beforePage重新赋值给现在的页码数page。这样当我们下一次进行获取更多的操作（第二章状态）时，我们的搜索条件仍为上一次的页码。

举个例子：

• 现在我还没有跳转，此时我下一次搜索的页码（page）为3，列表中有10条数据。这个时候我要离开页面进入详情页中，我记录了当前下一次搜索的页码page（beforePage=3）
• 然后我重新回到列表页，这时进行了一次onShow中的搜索，搜索条件为（page=1，pageSize=10),然后我将现在的page赋值为3，这样我再进行加载更多操作时，仍是接着之前的page进行搜索的，不会造成数据的重复和丢失

下方为实现的部分代码：如果我的代码和逻辑有不合适的地方欢迎讨论~

data：init: true, flag: false,

	onLoad() {
      if (this.init) {
        // 第一次进入页面时（onLoad）时触发获取第一页的5条活动
        this.getActivityData(true).then(() => {
	       this.init = false
        }
	  },
	onShow() {
	   // 阻止onLoad触发该逻辑
	   if (!this.init) {
	   // 防止底部的加载更多再次获取列表数据
	     this.flag = true
	     this.getActivityData(true, this.activityData.length).then(() => {
	       this.flag = false
	     })
	   }
	 },
	 onHide() {
	 // 页面离开记录当前的页码
    this.beforePage = this.page
 	 },
	 onReachBottom() {
	 // 当onShow的状态进行时，阻止加载更多再一次获取列表数据
      !this.flag && this.getActivityData()
     },
	 
	  
  ...
  
 // 获取活动列表
    getActivityData(initList = false, nowPageSize) {
      // initList为true时（onLoad和点击日历），获取该条件下的1页5条
      // nowPageSize有传值时，值为当前活动列表的活动数，获取该条件下的1页 nowPageSize 条，然后再将跳转前的page页码赋值给现在的page页码
      if (initList) {
        this.page = 1
      }
      let params = {
        pageNo: this.page,
        pageSize: nowPageSize || this.pageSize,
      }
      this.loadStatus = 'loading'
      initList &&
        uni.showLoading({
          title: this.$t('location.loading'),
          mask: true
        })
      return this.$api.activity.getActivityList(params).then(res => {
        if (res.status === 200) {
          uni.hideLoading()
          let total = res.data.total
          initList
            ? (this.activityData = res.data.data)
            : (this.activityData = this.activityData.concat(res.data.data))
          this.page = this.page + 1
          // 如果本次有传nowPageSize，将page还原为跳转前的页码，下一次再获取更多接着之前的页码和页数进行获取
          if (nowPageSize) {
            this.page = this.beforePage
          }
          if (this.activityData.length < total) {
            this.loadStatus = 'more'
          } else {
            this.loadStatus = 'noMore'
          }
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      })
    },