el-Carousel 根据数组长度轮播

最新推荐文章于 2024-05-28 18:23:51 发布

会飞的鱼—

最新推荐文章于 2024-05-28 18:23:51 发布

阅读量253

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_47657875/article/details/130718558

版权

该代码示例展示了如何使用Vue.js的ElementUI库创建一个自动播放的轮播图组件。通过对`datalist`数组进行切片和遍历，动态生成每个滑动项，每页显示6个数据项。`Math.ceil(datalist.length/6)`计算轮播图的页面数，确保正确渲染所有数据。

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


<template>
<el-carousel
   indicator-position="none"
   arrow="never"
   :autoplay="true"
   class="carousel"
   interval="3000"
 >
   <el-carousel-item
     v-for="item in Math.ceil(datalist.length / 6)"
     :key="item"
   >
     <div class="content">
       <div
         class="content-item"
         v-for="(item, index) in datalist.slice((item - 1) * 6,item * 6)"
         :key="index"
       >
         <div class="num-item"> {{ item.name}} </div>
       </div>
     </div>
   </el-carousel-item>
 </el-carousel>
</template>

//Math.ceil(datalist.length / 6) 的作用是计算 datalist 数组的长度除以 6 的结果，并向上取整。
//这是为了确定轮播图中需要显示多少个扇区。假设 datalist 数组的长度为 10，那么 Math.ceil(10 / 6) //的结果为 2，意味着轮播图将显示两个扇区，每个扇区显示 6 条数据（除了最后一个扇区，可能显示少于 6 //条数据）。

//datalist.slice((item - 1) * 6, item * 6) 的作用是从 datalist 数组中提取出当前扇区需要显视
//的数据项。根据当前的 item 值（表示当前扇区的索引），通过计算得到要提取的数据项的起始索引和结束 
//索引。例如，如果 item 的值为 1，那么起始索引为 (1 - 1) * 6 = 0，结束索引为 1 * 6 = 6，意味
//着提取 datalist 数组中的前 6 条数据作为当前扇区的数据项。

<script setup>
 let  datalist =  [
   { name: '1' },
   { name: '12' },
   { name: '1w' },
   { name: '14' },
   { name: '1w' },
   { name: '1y' },
   { name: '1t' },
   { name: '1c' },
   { name: '1c' },
   { name: '1d' },
   { name: '1g' },
   { name: '1d' },
 ]



</script>