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方法中有两个参数 initListnowPageSize ,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
          })
        }
      })
    },
发布了18 篇原创文章 · 获赞 2 · 访问量 3325
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览