注意在滚动层外部需要给定高度,我给的是最高高度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)
},