公告——实现两个公告同屏滚动轮播(elementUi-走马灯效果实现)

缺乏、安全感 2022-09-01 14:52 736阅读 0赞

最近在做电商前台页面，需要实现的功能是：两组数据同屏竖向滚动轮播：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
很早之前，我是有用过`js`或者`jq`写轮播图的，但是现在有了`vue+elementUi`之后，则想当然的想用`elementUi`中的走马灯组件。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
`elementUi`官网中提供的都是一屏一个元素的滚动，此时要实现的效果是一屏两个元素的滚动

## `html`部分代码 ##

<el-carousel direction="vertical" v-if="carouselArr.length">
 <el-carousel-item v-for="(items, indexs) in carouselArr" :key="indexs">
 <div v-for="(item,index) in items" :key="index">恭喜，{ { item.Item1}} { { item.Item2}} 用户申请的 { { item.Item3}} 的 { { item.Item4}} 样品 已发货</div>
 </el-carousel-item>
 </el-carousel>

1.  竖向滚动：`direction=‘vertical’`可以设置轮播方向为竖向
2.  由于要实现的是两项内容同屏滚动，则需要给`el-carouse`组件中添加两个`el-carouse-item`即可。
3.  在渲染数据之前，需要将数据数组改为二维数组，每个数组中的子元素都是两个数据组成的数组。

类似于这样的格式：`[[数据1,数据2],[数据3,数据4]]`

现在的问题变成了将一个一维数组改为二维数组：

//this.carouseList是一个一维数组，长度/2就是能够生成的二维数组的长度 this.carouseArr是一个二维数组
 let num = Math.ceil(this.carouselList.length / 2);
 for (var i = 0; i < num; i++) { 
 this.carouselArr[i] = this.carouselList.splice(0, 2);
 }

最终实现功能！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/354adf748e464c2fa41107bf41d3f818.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/fc7c428a6d2a4cd7b3a5a14e86bca92e.png