vue和iview實(shí)現(xiàn)Scroll 數(shù)據(jù)無限滾動功能
在做項(xiàng)目的時候因?yàn)閿?shù)據(jù)比較多，一次性全部渲染的話會花費(fèi)較多的時間，所以，想到每一次渲染10條數(shù)據(jù)
也想過每一次獲取十條數(shù)據(jù)然后顯示就行了，就目前自己所知最好的方法是修改接口，一次返回10條，可是這樣子太麻煩了，所以決定一次性請求所有數(shù)據(jù)，然后每次渲染十條，需要再上拉加載更多
使用的是iview中的組件Scroll
以下是獲取數(shù)據(jù)和封裝數(shù)據(jù)的方法：
原理是先定義兩個全局的變量，一個存儲全部的數(shù)據(jù)，一個存儲渲染的數(shù)據(jù)
在首次獲得數(shù)據(jù)的時候，往渲染的變量中存入全部數(shù)據(jù)的前十條：
然后在數(shù)據(jù)最底時上拉加載新的十條數(shù)據(jù)：
其中幾個問題都解決了：
1. 當(dāng)數(shù)據(jù)小于十條時，如何顯示
2. 當(dāng)數(shù)據(jù)渲染完成，不再渲染數(shù)據(jù)
3. Scroll的高度，因?yàn)槭枪潭ㄖ?，會在掛載后獲取整個屏幕的高度，根據(jù)自己的需求，對中間的scroll的高度進(jìn)行計(jì)算和設(shè)置
以上基本實(shí)現(xiàn)了整個功能，或許還有些問題沒有發(fā)現(xiàn)，如果發(fā)現(xiàn)了新問題會添加進(jìn)來
以上這篇vue和iview實(shí)現(xiàn)Scroll 數(shù)據(jù)無限滾動功能就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇vue里面父組件修改子組件樣式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue el-table實(shí)現(xiàn)行內(nèi)編輯功能
這篇文章主要為大家詳細(xì)介紹了vue el-table實(shí)現(xiàn)行內(nèi)編輯功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)代碼示例
在Vue.js開發(fā)中我們經(jīng)常會遇到需要將數(shù)字格式化為保留兩位小數(shù)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)的相關(guān)資料,需要的朋友可以參考下2024-06-06
vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁
這篇文章主要介紹了vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁 ,需要的朋友可以參考下2018-05-05
ant-design-vue table分頁onShowSizeChange后的pageNo解決
這篇文章主要介紹了ant-design-vue table分頁onShowSizeChange后的pageNo的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了介紹了Vue中跨標(biāo)簽通信的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue-router實(shí)現(xiàn)簡單vue多頁切換、嵌套路由、路由跳轉(zhuǎn)的步驟和報(bào)錯
最近學(xué)習(xí)到VUE路由這塊,發(fā)現(xiàn)這塊知識點(diǎn)有點(diǎn)多,好容易混亂,這篇文章主要介紹了vue-router實(shí)現(xiàn)簡單vue多頁切換、嵌套路由、路由跳轉(zhuǎn)的步驟和報(bào)錯的相關(guān)資料,需要的朋友可以參考下2024-05-05
這篇文章主要為大家介紹了裝飾者模式在日常開發(fā)中的縮影和vue中的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了Vue實(shí)現(xiàn)戶籍管理系統(tǒng)，戶籍信息的添加與刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05