Element-UI的?InfiniteScroll?無限滾動(dòng)組件基本使用及應(yīng)用場景
更新時(shí)間：2023年06月29日 08:31:11 作者：遠(yuǎn)方除了遙遠(yuǎn)一無所有
這篇文章主要介紹了Element-UI的InfiniteScroll無限滾動(dòng)組件基本使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
應(yīng)用場景
有的時(shí)候我們表格不想要使用分頁的功能，想滑動(dòng)到底部加載更多的數(shù)據(jù)；有時(shí)后端返回的數(shù)據(jù)很多要前端在一頁展示，但是使用了element-ui的table組件后會(huì)發(fā)生頁面卡頓的情況（因?yàn)閑lement-ui的table組件將所有的dom元素都渲染在頁面上了）
代碼
<template>
<div class="app">
<ul
class="infinite-list"
v-infinite-scroll="loadMore"
infinite-scroll-disabled="disabled"
infinite-scroll-distance="50"
style="overflow: auto"
>
<li v-for="(i, index) in count" :key="index" class="infinite-list-item">
{{ i }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
count: 20,
};
},
methods: {
// 加載更多時(shí)追加數(shù)據(jù)
loadMore() {
console.log("load");
this.count += 2;
},
},
computed: {
// 控制是否能加載更多
disabled() {
return this.count >= 30;
},
},
};
</script>
<style scoped>
.infinite-list {
height: 200px;
background-color: skyblue;
}
</style>到此這篇關(guān)于Element-UI的 InfiniteScroll 無限滾動(dòng)組件基本使用的文章就介紹到這了,更多相關(guān)Element-UI的 InfiniteScroll 無限滾動(dòng)組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在JavaScript開發(fā)中,對象和數(shù)組的操作非常頻繁,這篇文章主要介紹了JavaScript對象合并方法詳解及最佳實(shí)踐的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-02-02
JS+DIV+CSS實(shí)現(xiàn)的經(jīng)典標(biāo)簽切換效果代碼
這篇文章主要介紹了JS+DIV+CSS實(shí)現(xiàn)的經(jīng)典標(biāo)簽切換效果代碼,涉及JavaScript基于鼠標(biāo)事件針對頁面元素動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,頁面美觀實(shí)用,需要的朋友可以參考下2015-09-09
Area 區(qū)域?qū)崿F(xiàn)post提交數(shù)據(jù)的js寫法
這篇文章主要介紹了在Area區(qū)域的里 實(shí)現(xiàn)post 提交數(shù)據(jù) 的js寫法,需要的朋友可以參考下2014-04-04
讓mayfish支持mysqli數(shù)據(jù)庫驅(qū)動(dòng)的實(shí)現(xiàn)方法
mysql 是非持繼連接函數(shù)而 mysqli 是永遠(yuǎn)連接函數(shù)。也就是說 mysql 每次鏈接都會(huì)打開一個(gè)連接的進(jìn)程而 mysqli 多次運(yùn)行 mysqli 將使用同一連接進(jìn)程,從而減少了服務(wù)器的開銷。2010-05-05
js代碼判斷瀏覽器種類IE、FF、Opera、Safari、chrome及版本
這篇文章主要分享了判斷IE、FF、Opera、Safari、Chrome等瀏覽器和版本的兩種方法,需要的朋友可以參考下2014-05-05
微信小程序?qū)崿F(xiàn)虎年春節(jié)頭像制作
春節(jié)來臨之際，看到有網(wǎng)友分享了網(wǎng)頁版的虎年頭像制作工具。本文將為大家介紹一個(gè)虎年春節(jié)頭像制作小程序，文中的示例代碼講解詳細(xì)，需要的可以參考一下2022-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序選擇圖片控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
javascript獲取鼠標(biāo)位置部分的實(shí)例代碼(兼容IE,FF)
這篇文章介紹了javascript獲取鼠標(biāo)位置部分的實(shí)例代碼，有需要的朋友可以參考一下2013-08-08
基于iScroll實(shí)現(xiàn)下拉刷新和上滑加載效果
這篇文章主要為大家詳細(xì)介紹了基于iScroll實(shí)現(xiàn)下拉刷新和上滑加載效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
現(xiàn)在微博都有一個(gè)不錯(cuò)的效果就是會(huì)實(shí)時(shí)的動(dòng)態(tài)滾動(dòng)并顯示最新的信息了，下面我來給大家介紹仿新浪微博大廳首頁滾動(dòng)效果,希望此方法對大家會(huì)有幫助。2015-10-10