• vue 虚拟列表


    虚拟列表

    什么是虚拟列表

    虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术

    为什么需要虚拟列表

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

    直接上代码

    HTML

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

    js

    export default {
      name: 'ListView',
      computed: {
        contentHeight() {
          // 计算滚动条高度
          return this.data.length * this.itemHeight;
        }
      },
    
      mounted() {
        this.getData();
        this.update();
      },
    
      data() {
        return {
          data: [], // 总数据
          itemHeight: 30, // 单个高度
          list: [], // 渲染数据
        };
      },
    
      methods: {
        update(scrollTop = 0) {
          // 获取当前可展示数量
          const count = Math.ceil(this.$el.clientHeight / this.itemHeight);
          // 取得可见区域的起始数据索引
          const start = Math.floor(scrollTop / this.itemHeight);
          // 取得可见区域的结束数据索引
          const end = start + count;
    
          // 计算出可见区域对应的数据,让 Vue.js 更新
          this.list = this.data.slice(start, end);
    
          // 把可见区域的 top 设置为起始元素在整个列表中的位置(使用 transform 是为了更好的性能)
          this.$refs.content.style.webkitTransform = `translate3d(0, ${ start * this.itemHeight }px, 0)`;
        },
        handleScroll(e) {
          // 获取当前滚动条滚动位置
          const scrollTop = this.$refs.container.scrollTop;
          this.update(scrollTop);
        },
        getData() {
          //创建模拟数据
          let data = [];
          for (let i = 0; i < 1000000; i++) {
              data.push(`第 ${i} 个数据`)
          }
          this.data = [...data];
        }
      }
    }
    

    CSS

    .list-view {
         400px;
        height: 400px;
        overflow: auto;
        position: relative;
        border: 1px solid #c1c1c1;
        box-shadow: 3px 3px 5px #ccc;
      }
    
      .list-view-phantom {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        z-index: -1;
      }
    
      .list-view-content {
        left: 0;
        right: 0;
        top: 0;
        position: relative;
      }
    
      .list-view-item {
        padding: 6px;
        color: #999;
        line-height: 30px;
      }
    
  • 相关阅读:
    Django如何把数据库里的html格式输出到前端
    如何修改Django中的日期和时间格式 DateTimeField
    python2.7无法安装python-ldap、django-auth-ldap
    windows10下Python如何设置环境变量
    微信小程序在开发者工具页面显示空白且控制台看不到报错信息
    CentOS7 升级 openssh 到 openssh-8.0p1版本
    CentOS系统升级OpenSSH版本
    SSL相关漏洞解决方法
    CentOS 7.4安装 MySQL数据库
    Python3 基础知识
  • 原文地址:https://www.cnblogs.com/wangyong1997/p/14004477.html
Copyright © 2020-2023  润新知