vue长列表dom渲染性能问题解决办法示例代码-html代码-BFW代码库

vue长列表dom渲染性能问题解决办法示例代码

代码语言：html

所属分类：其他

代码描述：vue长列表dom渲染性能问题解决办法示例代码，只展示部分数据（可见区域展示数据），当屏幕滚动时替换展示的数据，DOM元素的数量是固定的，不会出现增加dom节点带来的性能问题。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/axios-0.18.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>

    <style>
        #app {
          height: 100vh;
        }
        .container {
          height: 100%;
          /* 设置overflow为auto才能监听scroll滚动事件 */
          overflow: auto;
        }
        .box {
          width: 96vw;
          height: 150px;
          background: #eee;
          border: 2px navajowhite solid;
          box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div id="app">

        <div id="app">
            <!-- 监听滚动事件使用passive修饰符 -->
            <div class="container" ref="container" @scroll.passive="handleScroll">
                <div :style="paddingStyle">
                    <!-- key使用index，可避免多次渲染该dom -->
                    <div class="box" v-for="(item, index) in showList" :key="index">
                        <h2>{{ item.title }} - {{ item.id }}</h2>
                        <h3>{{ item.from }}</h3>
                    </div>
                    <div>到低了~~~</div>
                </div>
            </div>
        </div>

    </div>
    <script>
        Mock.mock('/api', {
                [`list|${10}`]: [
          {
            'id|+1': 10,
            title: "@c.........完整代码请登录后点击上方下载按钮下载查看