使用elementui中el-Carousel 走马灯写出分页轮播效果

最新推荐文章于 2023-12-21 17:08:40 发布

原创最新推荐文章于 2023-12-21 17:08:40 发布 · 6.2k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

vue 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一种使用Element UI组件库中的轮播图组件(el-carousel)实现动态展示热门排行的方法。通过两次遍历数据，首先确定分页数量，然后渲染内容，每次显示5条数据，实现动态更新热门排行的效果。

在这里插入图片描述
如图,此处列举热门排行前50名

<el-carousel indicator-position="none" :autoplay="false">
   <el-carousel-item v-for="k in Math.ceil(contentList.length / 5)" :key="k">
       <ul>
           <li v-for="item in contentList.slice((k - 1) * 5, k * 5)" :key="item.id">{{item.name}}</li>
       </ul>
   </el-carousel-item>
</el-carousel>

比如此处,后台直接传给我50条数据,第一次遍历获取一共有分页数量,比如此处是一页显示5条,第二次遍历渲染内容,效果如下图（假数据,但是效果实现了)
在这里插入图片描述