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>
相关推荐
Y42588 小时前
本地多语言切换具体操作代码
前端·javascript·vue.js
fruge10 小时前
React 2025 完全指南:核心原理、实战技巧与性能优化
javascript·react.js·性能优化
etsuyou11 小时前
js前端this指向规则
开发语言·前端·javascript
不想上班只想要钱12 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
岁月宁静13 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
JS.Huang15 小时前
【JavaScript】原生函数
开发语言·javascript·ecmascript
533_16 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
ftpeak17 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
一个很帅的帅哥17 小时前
JavaScript事件循环
开发语言·前端·javascript
武天17 小时前
Vue项目中有封装过axios吗?怎么封装的?
vue.js