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>
相关推荐
木头没有瓜39 分钟前
vscode离线安装插件
ide·vue.js·vscode
浪裡遊2 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
夏梦春蝉3 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
我想说一句3 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
markyankee1013 小时前
使用 Vue 脚手架创建项目的完整指南
vue.js
南屿im3 小时前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
青松学前端3 小时前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
杨进军3 小时前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心3 小时前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
流星稍逝3 小时前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js