加载更多 请求下一页 滚动监听

目录

点击方式

滚动方式

---

2种方式，一种是点击按钮请求下一页，另一种是滚动到底部的时候请求下一页。

引入骨架屏优化加载过程中的体验。

loading为true时表示加载中，finished为true时表示当前是最后一页。

<div v-for="item in articleList" :key="item.aid">{{item}}</div>
<van-skeleton class="loading_tip" title :row="2" :loading="loading"></van-skeleton>
    <div v-show="finished" class="finished_tip fix_btn">
      - 已全部加载 -
</div>

点击方式

 <div v-show="!finished && !loading" @click="getDetail" class="bottom_fix_show_more_btn fix_btn">
      查看更多
 </div> 

getDetail() {
      this.loading = true;
      this.getShareSubjectDetail({
      params: this.params,
      cb: (res) => {
          this.loading = false;
          if(res.return_code === '200') {
            Object.keys(this.data).forEach(key => {
              this.data[key] = res.return_data.topic_data[key]
            })
            this.articleList = [...this.articleList, ...res.return_data.topic_data.artlist]
            let lastPage = Math.ceil(Number(res.return_data.topic_data.articlenum) / 5) ///向上取整
            
            if(this.articleList.length == 0 || this.params.page == lastPage) {
                 this.finished = true;
                 this.loading = false
             }
             else {
                 this.params.page++
             }
            document.title = this.data['title']
          }
        }
      })
    },

滚动方式

getDetail() {
      this.getShareSubjectDetail({
      params: this.params,
      cb: (res) => {
          if(res.return_code === '200') {
            Object.keys(this.data).forEach(key => {
              this.data[key] = res.return_data.topic_data[key]
            })
            this.articleList = [...this.articleList, ...res.return_data.topic_data.artlist]
            if(res.return_data.topic_data.artlist.length == 0) {
                this.finished = true;
                this.loading = false;
                window.removeEventListener('scroll', this.scrollToGet)
            }
          }
        }
      })
    },

   scrollToGet () { ///滚动监听
        var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight,document.body.clientHeight);
        if (clientHeight + scrollTop >= scrollHeight) {
            this.params.page++;
            this.getDetail();
        } else {
            this.loading = true
        }
    },

mounted() {
      this.getDetail();
      window.addEventListener('scroll', this.scrollToGet)
  },