«

基于Vue如何封装一个虚拟列表组件

时间：2024-8-4 06:36     作者：韩俊     分类： Javascript

今天小编给大家分享一下基于Vue如何封装一个虚拟列表组件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

    组件效果

    使用方法

    <template>
  <div>
    <div class="virtual-list-md-wrap">
      <hub-virtual-list :allData="data" itemHeight="70" :virtualData.sync="virtualData">
        <div v-for="(item, index) in virtualData" class="item">
         {{ item  }}
         <el-button type="primary" size="mini" plain @click="deleteItem(item)">删除</el-button>
        </div>
      </hub-virtual-list>
    </div>
  </div>
  
</template>
<script>
export default {
  data() {
    return {
      data: [],
      virtualData: []
    }
  },
  created() {
    setTimeout(() => {
      this.addData()
    }, 1000)
  },
  watch: {
  },
  methods: {
    addData() {
      for(let i = 0; i <= 100000; i ++) {
        this.$set(this.data, i, i)
      }
    },
    deleteItem(index) {
      this.data = this.data.filter((item) => item !== index)
    }
  }
}
</script>
<style>
.virtual-list-md-wrap {
  height: 500px;
  background-color: #FFFAF0;
}
.item {
  border-bottom: 1px solid #666;
  padding: 20px;
  text-align: center;
}
</style>

    属性

    参数说明类型可选值默认值
    allData全部数据Array-[]
    virtualData虚拟数据Array-[]
    itemHeight每行的高度，用于计算滚动距离Number, String-30

    插槽

    插槽名说明
    -自定义默认内容，即主体区域

    封装过程

    首先梳理我想要的组件效果：

      滚动条正常显示

      加载渲染大量数据不卡顿

      能对列表数据进行操作增删等

    滚动条正常显示

    需要把显示框分为3部分：显示高度，全部高度，虚拟数据高度

    大概的比例是这样的

    为达到滚动条的效果，在最外层显示高度设置

    overflow: auto
    可以把滚动条撑出来，全部高度则设置
    position: absolute;z-index: -1;height: auto;
    ,虚拟数据高度则设置
    position: absolute; height: auto;

    整体样式代码如下

    <template>
  <div class="hub-virtual-list">
    <!-- 显示高度 -->
    <div ref="virtualList" class="hub-virtual-list-show-height" @scroll="scrollEvent($event)">
      <!-- 全部高度，撑出滚动条 -->
      <div class="hub-virtual-list-all-height" :/>
      <!-- 存放显示数据 -->
      <div class="virtual-list" :/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hub-virtual-list {
  height: 100%;
  &-show-height {
    position: relative;
    overflow: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }
  &-all-height {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1;
    height: auto;
  }
  .virtual-list {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: auto;
  }
}
</style>

    加载渲染大量数据不卡顿

    如果想要渲染不卡顿，就得只加载显示区域的虚拟数据，虚拟数据的更新逻辑为：用

    startIndex
    和
    endIndex
    标志虚拟数据的起始索引和结束索引，在滚动条滑动时，通过计算滑动的距离去更新
    startIndex
    和
    endIndex
    。另外用
    offset
    标记偏移量，对虚拟数据区域设置
    transform: translate3d(0, ${this.offset}px, 0)
    跟着滚动条去移动

    核心部分代码如下

    scrollEvent(e) {
  const scrollTop = this.$refs.virtualList.scrollTop
  // 起始索引 = 滚动距离 / 每项高度
  this.startIndex = Math.floor(scrollTop / this.itemHeight)
  // 结束索引 = 开始索引 + 可见数量
  this.endIndex = this.startIndex + this.visibleCount
  // 偏移量 = 滚动距离
  this.offset = scrollTop - (scrollTop % this.itemHeight)
}

    能对列表数据进行操作增删等

    如果想要在数据里添加操作按钮，则需要在封装组件时设置插槽，且需要把虚拟数据同步给父组件

    设置插槽

    <!-- 显示高度 -->
<div ref="virtualList" class="hub-virtual-list-show-height" @scroll="scrollEvent($event)">
  <!-- 全部高度，撑出滚动条 -->
  <div class="hub-virtual-list-all-height" :/>
  <!-- 存放显示数据 -->
  <div class="virtual-list" :>
    <!-- 设置插槽 -->
    <slot/> 
  </div>
</div>

    滚动时把虚拟数据同步给父组件

    scrollEvent(e) {
  const scrollTop = this.$refs.virtualList.scrollTop
  // 起始索引 = 滚动距离 / 每项高度
  this.startIndex = Math.floor(scrollTop / this.itemHeight)
  // 结束索引 = 开始索引 + 可见数量
  this.endIndex = this.startIndex + this.visibleCount
  // 偏移量 = 滚动距离
  this.offset = scrollTop - (scrollTop % this.itemHeight)
  // 同步父组件数据
  this.inVirtualData = this.allData.slice(this.startIndex, this.endIndex)
  this.$emit('update:virtualData', this.inVirtualData)
}

    完整代码

    <template>
  <div class="hub-virtual-list">
    <!-- 显示高度 -->
    <div ref="virtualList" class="hub-virtual-list-show-height" @scroll="scrollEvent($event)">
      <!-- 全部高度，撑出滚动条 -->
      <div class="hub-virtual-list-all-height" :/>
      <!-- 存放显示数据 -->
      <div class="virtual-list" >
        <slot/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hub-virtual-list',
  props: {
    // 全部数据
    allData: {
      type: Array,
      default: () => []
    },
    // 虚拟数据
    virtualData: {
      type: Array,
      default: () => []
    },
    // 每项高度
    itemHeight: {
      type: [Number, String],
      default: '30'
    },
    // 每项样式
    itemStyle: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 起始索引
      startIndex: 0,
      // 结束索引
      endIndex: null,
      // 偏移量，计算滚动条
      offset: 0,
      inVirtualData: []
    }
  },
  computed: {
    // 所有高度
    allHeight() {
      // 每项高度 * 项数
      return this.itemHeight * this.allData.length
    },
    // 可见数量
    visibleCount() {
      // 可见高度 / 每项高度
      return Math.ceil(this.showHeight / this.itemHeight)
    },
    // 显示数据的偏移量
    getTransform() {
      return `translate3d(0, ${this.offset}px, 0)`
    }
  },
  watch: {
    allData: {
      handler() {
        this.inVirtualData = this.allData.slice(this.startIndex, this.endIndex)
        this.$emit('update:virtualData', this.inVirtualData)
      },
      deep: true
    }
  },
  mounted() {
    this.showHeight = this.$el.clientHeight
    this.startIndex = 0
    this.endIndex = this.startIndex + this.visibleCount
  },
  methods: {
    scrollEvent(e) {
      const scrollTop = this.$refs.virtualList.scrollTop
      // 起始索引 = 滚动距离 / 每项高度
      this.startIndex = Math.floor(scrollTop / this.itemHeight)
      // 结束索引 = 开始索引 + 可见数量
      this.endIndex = this.startIndex + this.visibleCount
      // 偏移量 = 滚动距离
      this.offset = scrollTop - (scrollTop % this.itemHeight)
      // 同步父组件数据
      this.inVirtualData = this.allData.slice(this.startIndex, this.endIndex)
      this.$emit('update:virtualData', this.inVirtualData)
    }
  }
}
</script>

<style lang="scss" scoped>
.hub-virtual-list {
  height: 100%;
  &-show-height {
    position: relative;
    overflow: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }
  &-all-height {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1;
    height: auto;
  }
  .virtual-list {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: auto;
  }
}
</style>

    标签: javascript vue

    热门推荐

    1 Javascript中的delete操作符详细介绍
    2 创建自己的jquery表格插件
    3 jQuery实现鼠标经过像翻页和描点链接效果
    4 jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
    5 node.js入门教程之querystring模块的使用方法
    6 Vue父组件和子组件之间数据传递和方法怎么调用
    7 Node.js中的path模块怎么使用
    8 javascript 写类方式之一
    9 js用Date对象处理时间实现思路及代码
    10 基于jquery实现下拉框美化特效

    日历

    标签

    hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

    搜索

    最新文章

    热门文章