关于infinite-scroll

2019-12-03

关于无限加载滚动，之前一直没有特别深入了解。特别是busy，busy为true的时候是不加载，busy为false的时候才加载。看下代码

// 模板
<div class="apply-process-page" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="50">
<HouseItem v-for="(item,idx) in data" :key="idx" :houseInfo="item" />
  <p v-show="busy" class="page-infinite-loading">
    <mt-spinner type="fading-circle" class="icon"></mt-spinner>
    加载中...
  </p>
<p v-show="noMore" class="no-more-data">没有更多了</p>
</div>


data(){
  return{
    page: 0,
    pageSize: 10,
    busy: false,
    noMore: false,
  }
}


async loadMore() {
  if (this.noMore) { return }
  this.busy = true
  this.page += 1
  const params = {
    cityId: this.$route.query.cityId,
    page: this.page,
    pageSize: this.pageSize,
  }
  const [err, res] = await to(this.$get('/api/agent/housePromote/listExpiringHouse', {
    params,
  }))
  if (err) {
    Toast('服务出错了')
    console.error(err)
    this.houseData = []
    this.busy = true
    return
  }
  if (res.errno === 0 && res.data) {
    if (!res.data.hasMore) {
      this.noMore = true
    }
    this.houseData.push(...res.data.data)
    this.$nextTick(() => {
      this.busy = false
    })
  } else {
    Toast(res.errmsg || '服务出错了')
    this.busy = true
  }
},


.page-infinite-loading{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: #fff;
  .icon{
    margin-right: 5px;
  }
}
.no-more-data{
  margin-bottom: 60px;
  margin-top: 30px;
  font-size: 12px;
  line-height: 12px;
  color: #fff;
  text-align: center;
}