vue 虚拟滚动 vue-virtual-scroller RecycleScroller

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>
相关推荐
界面开发小八哥37 分钟前
数据可视化图表库LightningChart JS v8.0上线:全新图例系统 + 数据集重构
javascript·信息可视化·数据可视化·lightningchart
烛阴1 小时前
【TS 设计模式完全指南】从“入门”到“劝退”,彻底搞懂单例模式
javascript·设计模式·typescript
java水泥工1 小时前
校园管理系统|基于SpringBoot和Vue的校园管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
正义的大古1 小时前
OpenLayers常用控件 -- 章节六:全屏控件教程
前端·javascript·html·openlayers
正义的大古3 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
雲墨款哥4 小时前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程4 小时前
深入JS(一):手写 Promise
前端·javascript
EndingCoder5 小时前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
子兮曰5 小时前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite