文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vxe-list vue怎么实现下拉框的虚拟列表

2023-06-30 18:52

关注

本篇内容主要讲解“vxe-list vue怎么实现下拉框的虚拟列表”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vxe-list vue怎么实现下拉框的虚拟列表”吧!

vxe-list vue 下拉框的虚拟列表

vxe-table vxe-list vue 实现下拉框的虚拟列表

虚拟列表的实现原理

只渲染可视区的 dom 节点,其余不可见的数据卷起来,只会渲染可视区域的 dom 节点,提高渲染性能及流畅性,优点是支持海量数据的渲染;当然也会有缺点:滚动效果相对略差(海量数据与滚动效果的取舍问题就看自己的需求喽);

<div class="my-select">   <input type="text" class="my-select-input" readonly>    <vxe-list class="my-select-wrapper" :loading="loading" :data="list">        <template v-slot="{ items }">            <div class="my-select-option" v-for="item in items" :key="item.value">{{ item.label }}</div>        </template>    </vxe-list></div>
export default {data () {return {      loading: false,      list: []    }},created () {    this.loading = true        setTimeout(() => {            const startTime = Date.now()            var list = []            for(var i=0;i<100000;i++){                list.push({                    label: '选项'+i,                    value: i                })            }            this.list = list            this.loading = false            this.$nextTick(() => {                this.$XModal.message({ message: `渲染 ${list.length} 行,用时 ${Date.now() - startTime}毫秒`, status: 'info' })            })        }, 200)}}
.my-select {    width: 200px;    position: relative;    background-color: #fff;}.my-select-input {    width: 100%;    height: 24px;    border: 1px solid #dcdfe6;}.my-select-wrapper {    position: absolute;    left: 0;    top: 26px;    width: 100%;    height: 200px;    background-color: #fff;    border: 1px solid #dcdfe6;}.my-select-option:hover {    background-color: #f5f7fa;    cursor: pointer;}

vxe-list vue怎么实现下拉框的虚拟列表

接下来测试一下

渲染 1w 条只需要 150 毫秒左右

渲染 5w 条只需要 300 毫秒左右

渲染 10w 条只需要 500 毫秒左右

vue虚拟列表实现原理

应用场景

前端的业务开发中会遇到不使用分页方式来加载长列表的需求。如在数据长度大于 1000 条情况,DOM 元素的创建和渲染需要的时间成本很高,完整渲染列表所需要的时间不可接受,同时会存在滚动时卡顿问题;

解决该卡顿问题的重点在于如何降低长列表DOM渲染成本问题,文章将介绍通过虚拟列表渲染的方式解决该问题。 

为什么需要虚拟列表

虚拟列表是对长列表的一种优化方案。在前端开发中,会碰到一些不能使用分页方式来加载列表数据的业务形态,我们称这种列表叫做长列表。比如,手机端,淘宝商品展示,美团外卖等,数据量特别庞大,不适合分页,以及懒加载,这时候我们可以采用虚拟列表,只展示可视区域数据。

实现思路

虚拟列表的核心思想为可视区域渲染,在页面滚动时对数据进行截取、复用DOM进行展示的渲染方式。

实现虚拟列表就是处理滚动条滚动后的可见区域的变更,其中具体步骤如下:

计算当前可见区域起始数据的 startIndex

计算当前可见区域结束数据的 endIndex

计算当前可见区域的数据,并渲染到页面中

计算 startIndex 对应的数据在整个列表中的偏移位置 startOffset,并设置到列表上

vxe-list vue怎么实现下拉框的虚拟列表

基础实现

我们首先要考虑的是虚拟列表的 HTML、CSS 如何实现:

html:

<template>     <div     class="list-view"    :style="{        height: `${height}px`    }"     @scroll="handleScroll">        <div        class="list-view-phantom"               :style="{            height: contentHeight        }">        </div>        <ul        ref="content"        class="list-view-content">            <li                class="list-view-item"                :style="{                    height: itemHeight + 'px'                }"                v-for="(item, index) in visibleData"                 :key="index">                    {{ item }}            </li>        </ul>  </div></template>

script:

<script>export default {    name: 'ListView',    props: {    data: {        type: Array,        default: function() {            const list = []            for (let i = 0; i < 1000000; i++) {                list.push('列表' + i)            }            return list        }    },    height: {        type: Number,        default: 400    },    itemHeight: {        type: Number,        default: 30    },  },  computed: {    contentHeight() {        return this.data.length * this.itemHeight + 'px';    }  },  mounted() {      this.updateVisibleData();  },  data() {    return {      visibleData: []    };  },  methods: {    updateVisibleData(scrollTop) {        scrollTop = scrollTop || 0;        const visibleCount = Math.ceil(this.$el.clientHeight / this.itemHeight); // 取得可见区域的可见列表项数量        const start = Math.floor(scrollTop / this.itemHeight); // 取得可见区域的起始数据索引        const end = start + visibleCount; // 取得可见区域的结束数据索引        this.visibleData = this.data.slice(start, end); // 计算出可见区域对应的数据,让 Vue.js 更新        this.$refs.content.style.webkitTransform = `translate3d(0, ${ start * this.itemHeight }px, 0)`; // 把可见区域的 top 设置为起始元素在整个列表中的位置(使用 transform 是为了更好的性能)    },    handleScroll() {        const scrollTop = this.$el.scrollTop;        this.updateVisibleData(scrollTop);    }  }}</script>

css:

<style lang="scss" scoped>.list-view {    overflow: auto;    position: relative;    border: 1px solid #aaa;    width: 200px;}.list-view-phantom {    position: absolute;    left: 0;    top: 0;    right: 0;    z-index: -1;}.list-view-content {    left: 0;    right: 0;    top: 0;    position: absolute;}.list-view-item {    padding: 5px;    color: #666;    line-height: 30px;    box-sizing: border-box;}</style>

到此,相信大家对“vxe-list vue怎么实现下拉框的虚拟列表”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯