vue 虚拟滚动 vue-virtual-scroller RecycleScroller

qq_419854052025-01-03 10:09

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

javascript 复制代码

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

main.js

javascript 复制代码

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

html 复制代码

<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>