vue长列表数据刷新怎么实现

本篇内容介绍了“vue长列表数据刷新怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、效果展示

两列均为局部可视范围内数据刷新

二、代码

实现的主要思路：

提前保留可视div的高度，计算出可视高度能填满情况下最少的单元格条数；

根据提供的每个单元格高度和总数据条数计算出总的可滑动div高度，使其可以滑动；

在上述可滑动div内部再包裹一层div，此节点的作用就是在滑动过程中，改变自身的 top 值，使之在父节点滑动中始终出现在父节点的可视区域内。

根据滑动的距离更新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)    }}

“vue长列表数据刷新怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！