本篇内容介绍了“vue长列表数据刷新怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
一、效果展示
两列均为局部可视范围内数据刷新
二、代码
实现的主要思路:
1、提前保留可视div的高度,计算出可视高度能填满情况下最少的单元格条数;
2、根据提供的每个单元格高度和总数据条数计算出总的可滑动div高度,使其可以滑动;
3、在上述可滑动div内部再包裹一层div,此节点的作用就是在滑动过程中,改变自身的 top 值,使之在父节点滑动中始终出现在父节点的可视区域内。
4、根据滑动的距离更新vue数据,但是也只是更新能填满可视区域最小条数。
<div class="main"> <div v-for="(dom) in longListEl" :key="dom.id" class="longList"> <div :id="dom.id" class="contain"> <div > <div : v-for="(item,index) in dom.data" :key="item.id"> {{ item.title }} </div> </div> </div> </div> </div>
export default { data() { return { longListData:[], expectationCellHeight:40, longListEl:[{id:'contain',data:[]},{id:'contain1',data:[]}], longListDataManages:[] }; }, mounted() { for(let index = 0;index < 250000;index ++){ this.longListData.push({id:index,title:('我是第' + index + '个')}) } this.$nextTick(()=>{ this.longListEl.forEach((dom)=>{ let containEl = document.getElementById(dom.id) if(containEl){ this.longListDataManages.push(new LongListDataManage(containEl,this.longListData,this.expectationCellHeight,(data)=>{ dom.data = data })) } }) }) }, methods: { }, };
function LongListDataManage(el,totalData,expectationCellHeight,refreshDataCallBack){ this.el = el//需要操作的dom this.startIndex = 0//数据源的开始索引 this.endIndex = 0//数据源的结束索引 this.containElHeight = el ? el.offsetHeight : 0//可视区域高度 this.totalData = totalData//全部数据源 this.refreshDataCallBack = refreshDataCallBack//数据刷新回调 this.expectationCellHeight = expectationCellHeight//预期的单元cell高度 this.expectationCellFullScreenNum = 0//预期可视区域展示的单元条数 this.expectationTotalHeight = 0//预期滑动的最大高度 this.scrollTop = 0//当前滚动距离 this.beginRefreshDataDistance = expectationCellHeight//滑动触发刷新数据最小距离,这里仅为一个单元格高度 // 开始填充数据 this.begin = function(){ this.initData() this.getCurrentShowDatas() this.addListenerScroll() } // 初始化参数 this.initData = function(){ //总高度设定 this.expectationTotalHeight = this.totalData.length * this.expectationCellHeight this.el.style.height = this.expectationTotalHeight + 'px' //数据源的结束索引设定(向上取整) this.endIndex = this.expectationCellFullScreenNum = Math.ceil((this.containElHeight / this.expectationCellHeight) + 0.1) } // 开始获取当前需要展示的区间 this.getCurrentShowDatas = function(){ //截取数据源开始跟结束节点之间的数据 let currentData = this.totalData.slice(this.startIndex,this.endIndex) //给vue提供数据 this.refreshDataCallBack(currentData) } // 监听滚动 this.addListenerScroll = function(){ //父节点 let parentNode = this.el.parentNode //第一个子节点(改变其top值实现始终在父节点的可视区域内) let firstChild = this.el.firstChild let scrollingEvent = ()=>{ let scrollTop = parentNode.scrollTop //滑动的距离超过规定的阀值或者滑动距离为0进行数据源重置 if(Math.abs(scrollTop - this.scrollTop) >= this.beginRefreshDataDistance || scrollTop <= 0){ //更改数据源区间索引 this.startIndex = Math.ceil(scrollTop / this.expectationCellHeight) this.endIndex = this.startIndex + this.expectationCellFullScreenNum //上下平移可视区域展示dom,实现屏幕相对位置不变 firstChild.style.top = scrollTop + 'px' //回传数据源 this.getCurrentShowDatas() this.scrollTop = scrollTop } } //开始监听滚动 parentNode.addEventListener("scroll", scrollingEvent) } }