swiper vue 上一页_用vue实现一个虚拟列表

最新推荐文章于 2024-08-12 09:01:04 发布

weixin_39692253

最新推荐文章于 2024-08-12 09:01:04 发布

阅读量381

点赞数

文章标签： swiper vue 上一页

本文链接：https://blog.csdn.net/weixin_39692253/article/details/112193006

版权

本文介绍如何使用Vue实现一个虚拟列表，以提高超长列表的性能。通过监听滚动事件，计算显示部分的数据，并应用简单的过渡动画，模拟Swiper的滑动效果。虽然基本实现相对简单，但实现高度不固定且流畅的滚动效果则更具挑战，需要考虑缓存列表项高度和应用相应算法。

摘要由CSDN通过智能技术生成

上次分享了超长列表分片加载的方式，这种方式现在一般不会使用，因为dom会变的无比庞大，页面会很卡，今天分享用vue实现一个虚拟列表的简易实现，本来是想用原生实现一个，后来觉得直接使用computed，简单一些。

思路就是用vue的for循环渲染列表，自己手动加一个滚动条，然后通过监听scroll，算出应该显示到第几个，通过计算属性截取显示的数据，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .list-wrap{
            position: relative;
            overflow-y: scroll;
            width: 200px;
            margin: 100px auto;
            box-sizing: border-box;
            border: solid 1px red;
        }
        .list{
            position: absolute;
            top: 0;
            left: 0;
        }
        .list li{
            border: solid 1px blue;
            line-height: 30px;
        }
</style>
</head>
<body>
<ul id="app"&g