vue长列表,虚拟滚动

1.新建子组件,将数据传递过去(几万条数据的数组,一次性展示多少条,每条数据的行高).

复制代码
<template>
    <div class="vitualScroll">
        <sub-scroll :dataList="dataList" :rowCount="20" :rowHeight="20"></sub-scroll>
    </div>
</template>

<script>
import subScroll from "./components/subScroll.vue"
export default{
    name: 'virtualScroll',
    data(){
        return {
            //冻结数组,初步优化
            dataList: Object.freeze(new Array(20000).fill(null).map((item, index) => ({ n: index+1 })))
        }
    },
    components:{
        subScroll
    }
}
</script>
<style scoped lang="less">
.vitualScroll{
    width: 100%;
    height: 100%;
}
</style>

2.子组件subScroll.vue

div.scrollBar用来使父盒子出现滚动条,div.scrollBar的高度就是数据总条数*单条数据的高度。

div.list才是v-for数据的盒子,采用绝对定位,在父元素滑动事件中更新数据,并且将div.list的位置拉回来(div.list采用绝对定位,滑动滚动会往上跑)

复制代码
<template>
    <div class="scrollView" ref="scrollView" :style="{'--rowHeight': $props.rowHeight + 'px'}" @scroll="onScroll()">
        <div class="scrollBar" :style="{'--scrollBarHeight': $props.dataList.length * $props.rowHeight + 'px'}">

        </div>
        <div class="list" ref="list">
            <div class="item" v-for="(item, index) in copyDataList" :key="index">
                {{ item.n }}
            </div>
        </div>
    </div>
</template>

<script>
export default{
    name: 'subScroll',
    data(){
        return {
            start: 0
        }
    },
    computed:{
        copyDataList(){
            return this.$props.dataList.slice(this.start, this.$props.rowCount + this.start)
        }
    },
    props:{
        dataList: {
            type: Array,
            default(){
                return [{}]
            }
        },
        rowCount: {
            type: Number,
            default: 0
        },
        rowHeight: {
            type: Number,
            default: 0
        }
    },
    mounted(){
        
    },
    methods: {
        onScroll(){
            //全局节流函数
            this.$throttle(this.updataData, 50)
        },
        updataData(){
            let offsetTop = this.$refs.scrollView.scrollTop
            let offsetNum = Math.round(offsetTop / this.$props.rowHeight)
            this.start = offsetNum
            this.$refs.list.style.transform = `translateY(${offsetTop}px)`
            console.log('滑动的距离', offsetTop)

        }
    }
}
</script>

<style lang="less" scoped>
.scrollView{
    width: 200px;
    height: 400px;
    overflow: auto;
    position: relative;
    .item{
        height: var(--rowHeight);
    }
    .scrollBar{
        height: var(--scrollBarHeight);
    }
    .list{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}
</style>
相关推荐
老兵发新帖22 分钟前
pnpm常见报错解决办法
前端
Sonetto199929 分钟前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin29 分钟前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
好_快1 小时前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛1 小时前
前端技术Ajax入门
java·开发语言·前端
牧羊狼的狼1 小时前
React.memo 和 useMemo
前端·javascript·react.js
xixixin_1 小时前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮
还是鼠鼠1 小时前
Android移动应用开发入门示例:Activity跳转界面
android·前端·gitee·android studio·android-studio
不知疲倦的仄仄1 小时前
跨域 同源策略通俗讲解
前端·后端·spring·edge浏览器
珹洺1 小时前
Jsp技术入门指南【十】IDEA 开发环境下实现 MySQL 数据在 JSP 页面的可视化展示,实现前后端交互
java·运维·前端·mysql·intellij-idea·jsp