recycleviewitem 列表加载动画_用vue实现一个虚拟列表
生活随笔
收集整理的這篇文章主要介紹了
recycleviewitem 列表加载动画_用vue实现一个虚拟列表
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上次分享了超長列表分片加載的方式，這種方式現在一般不會使用，因為dom會變的無比龐大，頁面會很卡，今天分享用vue實現一個虛擬列表的簡易實現，本來是想用原生實現一個，后來覺得直接使用computed，簡單一些。
思路就是用vue的for循環渲染列表，自己手動加一個滾動條，然后通過監聽scroll，算出應該顯示到第幾個，通過計算屬性截取顯示的數據，直接上代碼：?
<html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <style> .list-wrap{ position: relative; overflow-y: scroll; width: 200px; margin: 100px auto; box-sizing: border-box; border: solid 1px red; } .list{ position: absolute; top: 0; left: 0; } .list li{ border: solid 1px blue; line-height: 30px; }style>head><body><ul id="app"> <div class="list-wrap" ref="listWrap" @scroll="scrollListener"> <div class="scroll-bar" ref="scrollBar">div> <ul class="list" ref="list"> <li v-for="val in showList">{{val}}li> ul> div>ul><script src="../../js/vue.js">script><script> new Vue({ el: '#app', data(){ return { list: [],//超長的顯示數據 itemHeight: 30,//每一列的高度 showNum: 10,//顯示幾條數據 start: 0,//滾動過程顯示的開始索引 end: 10,//滾動過程顯示的結束索引 } }, computed: { //顯示的數組，用計算屬性計算 showList(){ return this.list.slice(this.start, this.end); } }, mounted(){ //構造一個超長列表 for (let i = 0; i < 1000000; i++) { this.list.push('列表' + i) } //計算滾動容器高度 this.$refs.listWrap.style.height = this.itemHeight * this.showNum + 'px'; //計算總的數據需要的高度，構造滾動條高度 this.$refs.scrollBar.style.height = this.itemHeight * this.list.length + 'px'; }, methods: { scrollListener(){ //獲取滾動高度 let scrollTop = this.$refs.listWrap.scrollTop; //開始的數組索引 this.start = Math.floor(scrollTop / this.itemHeight); //結束索引 this.end = this.start + this.showNum; //絕對定位對相對定位的偏移量 this.$refs.list.style.top = this.start * this.itemHeight + 'px'; } } })script>body>html>看效果：
?
其實原理很簡單，把代碼跑起來，輸出看看這些數據就很容易就搞懂虛擬列表的實現了。但這只是實現，要想做的更好就很難了。比如可以前后多添加幾條數據，像swiper樣，然后滾動的過程加一些小的過渡動畫，讓頁面滑動過程柔順一些，還有，做個節流還是很有必要的。要是想做高度不固定的，那就更難了，要緩存每個列表的高度，然后用一些算法去計算滾動過程的高度。
最后祝大家六一快樂！！！
(可添加好友共同進步)
Coding 個人筆記
總結
以上是生活随笔為你收集整理的recycleviewitem 列表加载动画_用vue实现一个虚拟列表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java三级报名_java web 学习
- 下一篇： tlab java_浅析java中的TL