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

爱被打了一巴掌 2022-12-21 06:29 184阅读 0赞

**目录**

点击方式

滚动方式

--------------------

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>

## 点击方式 ##

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)
      },