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: "@ctitle(15,25)",
            from: "@ctitle(3,10)",
          }
        ]

       });
        var Main =  
    
      {
      name: "App",
      data() {
        return {
          allList: [], // 所有数据 
          isRequest: false,// 是否正在请求数据
          oneHeight: 150,  // 单条数据的高度
          showNum: 0,    // 可见区域最多能展示多少条数据
          startIndex: 0,   // 渲染元素的第一个索引
          canScroll: true,  // 可以监听滚动，用于节流
          scrollTop: 0,// 当前滚动高度,再次返回页面时能定位到之前的滚动高度
          lower: 150,// 距离底部多远时触发触底事件
        };
      },
      created() {
        this.getData();// 请求数据
      },
      activited() {
        this.$nextTick(()=>{
          // 定位到之前的高度
          this.$refs.container.scrollTop = this.scrollTop
        })
      },
      mounted() {
        this.canShowNum();  // 获取可见区域能展示多少条数据
        window.onresize = this.canShowNum;  // 监听窗口变化，需要重新计算一屏能展示多少条数据
        window.onorientationchange = this.canShowNum;  // 监听窗口翻转
      },
      computed: {
     .........完整代码请登录后点击上方下载按钮下载查看