虚拟滚动插件: vue-virtual-scroller 使用

基本使用

依赖安装

npm i vue-virtual-scroller

项目中引入

import VueVirtualScroller from 'vue-virtual-scroller'
import "vue-virtual-scroller/dist/vue-virtual-scroller.css"


Vue.use(VueVirtualScroller)

注意: 样式文件必须引入

简单封装之后调用

<template>
  <RecycleScroller
      class="scroller"
      :items="list"
      :item-size="32"
      key-field="id"
      v-slot="{ item }">
    <!-- 这里就是自己要渲染的每一项的内容-->
    <div class="user">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>
<script>
export default {
  props: {
    list: Array,
  }
}
</script>
<style lang="scss" scoped>
.scroller {
  height: 100%;
}
.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
</style>

调用封装的组件

<template>
  <div>
    <h3>Demo03(使用RecycleScroller, 输入框为原生 input)</h3>
    <h3>数据数量:{{ count }}</h3>
    <input v-model="kw" type="text" style="width: 100%;height: 30px;">
    <div style="height: 200px;width: 300px;margin:20px;border: 1px solid #333;overflow: auto;">
      <RecycleScrollerWrapper01 :list="items"></RecycleScrollerWrapper01>
    </div>
  </div>
</template>

<script>
import RecycleScrollerWrapper01 from "../components/RecycleScrollerWrapper01.vue";

export default {
  name: "Demo03",
  components: {RecycleScrollerWrapper01},
  props: {
    count: Number
  },
  data() {
    return {
      items: [],
      kw: ''
    }
  },
  created() {
    for (let i = 0; i < this.count; i++) {
      this.items.push({
        id: i,
        name: '姓名-' + i
      })
    }
  }
}
</script>

<style scoped>

</style>

相关文章

前端长列表优化之虚拟滚动vue-virtual-scroller

如何处理前端超长列表

读vue-virtual-scroller 源码

vue-virtual-scroller

lite-virtual-list

vue项目引入vue-virtual-scroller及使用

聊聊前端开发中的长列表