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;
        }
    </styl.........完整代码请登录后点击上方下载按钮下载查看