InfiniteScroll 解决自动无限加载

注意在滚动层外部需要给定高度,我给的是最高高度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)
      },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
v-infinite-scroll是一个功能强大的Vue组件,可以实现在下拉滚动时自动更多内容的效果。它有几个重要的属性可以帮助我们进行开发。 其中,v-infinite-scroll属性用于指定无限滚动的方法,即在滚动到底部时需要执行的函数。 infinite-scroll-disabled属性用于控制是否禁用无限滚动功能。如果设置为true,将不会触发方法。 infinite-scroll-delay属性是一个节流时延,单位为毫秒。它可以控制在滚动过程中方法的调用频率,避免过多的请求。 infinite-scroll-distance属性是一个触发的距离阈值,单位为像素。当滚动距离底部小于等于这个阈值时,将会触发方法。 infinite-scroll-immediate属性用于控制是否立即执行方法。默认情况下,如果组件使用无限滚动功能,即使在Vue实例中没有手动调用方法,组件也会在初始状态下执行一次。 综上所述,我们可以根据这些属性来定制我们想要的下拉效果,实现页面内容的自动。同时还有一个类似的库vue-virtual-infinite-scroll,它基于Iscroll的vue2组件,支持高性能滚动、无限和下拉刷新的大数据列表。这个组件也可以通过相似的属性来配置和使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3+element-plus 通过v-infinite实现下拉滚动无限](https://blog.csdn.net/m0_57033755/article/details/130482764)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue-virtual-infinite-scroll-基于Iscroll的vue2组件,支持具有高性能滚动,无限和拉动刷新的大数据...](https://download.csdn.net/download/weixin_42112894/19136987)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Element UI - v-infinite-scroll无限滚动组件](https://blog.csdn.net/qq2754289818/article/details/130993513)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值