vue 虚拟滚动 vue-virtual-scroller RecycleScroller

最新推荐文章于 2025-03-12 18:58:50 发布

qq_41985405

最新推荐文章于 2025-03-12 18:58:50 发布

阅读量591

点赞数 7

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_41985405/article/details/144893348

版权

vue 3 https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/README.md
vue 2 https://github.com/Akryum/vue-virtual-scroller/tree/v1/packages/vue-virtual-scroller

在这里插入图片描述

npm install --save vue-virtual-scroller@next

main.js

// 虚拟滚动
import VueVirtualScroller from 'vue-virtual-scroller'
// 重要
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
app.use(VueVirtualScroller)

<div class="scroll-container">
      <RecycleScroller class="scroller" :items="list" :item-size="200" key-field="id" v-slot="{ item, index }">
        <div class="user">
          <img :src="item.url" alt="">
        </div>
      </RecycleScroller>
    </div>

<style lang="scss" scoped>
.scroll-container {
  width: 200px;
  height: 600px;
  border: 1px solid #e1e1e1;

  .scroller {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    // 隐藏滚动条样式
    &::-webkit-scrollbar {
      width: 0rem !important;
    }
  }

  .user {
    width: 100%;
    height: 200px;
    padding: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>