InfiniteScroll 解决自动无限加载

最新推荐文章于 2025-09-04 16:57:24 发布

原创最新推荐文章于 2025-09-04 16:57:24 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue

本文描述了一个使用Vue.js实现的滚动加载（infinite-scroll）功能，当用户滚动到页面底部20px时，会触发`loadArticle`方法加载新的数据，同时管理加载状态和内容高度限制。

注意在滚动层外部需要给定高度，我给的是最高高度maxHeight：900px，infinite-scroll-distance="20"是离页面最底部20px时触发加载新数据

	  <a-layout>
        <a-layout-content :style="contentStyle" >
          <a-empty v-if="dataList.length===0"></a-empty>
          <a-spin :spinning="loading">
            <ul
              v-infinite-scroll="loadArticle"
              infinite-scroll-disabled="disabled"
              infinite-scroll-distance="20"
            >
              <li
                @mouseenter="selectedIndex=index"
                @mouseleave="selectedIndex=null"
                v-for="(article,index) in dataList"
              >
                <ArticleTemplate
                  :article="article"
                  :show-del="selectedIndex===index"
                >
                </ArticleTemplate>
              </li>
              <div :style="{marginTop:'20px',display:'flex',justifyContent:'center'}">
                <p v-if="loading">加载中...</p>
                <p v-if="noMore">没有更多了...</p>
              </div>
            </ul>
          </a-spin>
        </a-layout-content>
      </a-layout>

computed:{
      contentStyle(){
        return { padding: '24px', background: '#fff',maxHeight:'900px', overflowYy: 'auto'}
      },
      noMore() {
        return this.rownum >= this.total
      },
      disabled() {
        return this.loading || this.noMore;
      }
    },

loadArticle(){
        this.loading = true
        setTimeout(()=>{
          this.rownum += 5
          this.getDataList()
          this.loading = false
        },1000)
      },