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

最近在做电商前台页面，需要实现的功能是：两组数据同屏竖向滚动轮播：

很早之前，我是有用过js或者jq写轮播图的，但是现在有了vue+elementUi之后，则想当然的想用elementUi中的走马灯组件。

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">恭喜，<span><span><span class="textCls" style="width:48px;">{{item.Item1}}</span> {{item.Item2}}</span> 用户申请的 <span class="textCls">{{item.Item3}}</span> 的 <span class="textCls">{{item.Item4}}</span> 样品 <span> 已发货</span></span></div></el-carousel-item>
</el-carousel>

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

类似于这样的格式：[[数据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);
}

最终实现功能！！！

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

windows如何实现视屏自动定时、全屏、轮播播放
windows如何实现视屏自动定时.全屏.轮播播放一.下载ffmpeg 二.全屏播放三.定时播放本文的实现方式是通过ffmpeg工具实现的,想要了解这个工具有多强大,请自行移步Google 一 ...
iOS 两种不同的图片无限轮播
代码地址如下: http://www.demodashi.com/demo/11608.html 前记其实想写这个关于无限轮播的记录已经很久很久了,只是没什么时间,这只是一个借口,正如:时间就像海绵 ...
仿网易/QQ空间视频列表滚动连播炫酷效果
代码地址如下: http://www.demodashi.com/demo/11201.html 一.准备工作 AndroidStudio 开发环境需要下载七牛的开源播放器SDK 本例子实现了仿网易 ...
html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法在页面中引入jqu ...
CSS3实现列表无限滚动/轮播
使用CSS3实现列表的无限滚动/轮播效果预览思路将当前列表滚动至最后一项的末尾,然后瞬间切换回第一项问题点用什么方式实现无限轮播这个问题就是列表滚动到最后时底部会留白(有多余空间)如何处理 ...
宽屏图片轮播html,jQuery实现宽屏图片轮播实例教程
本文实例讲述了jQuery实现宽屏图片轮播实例教程.分享给大家供大家参考.具体如下: 运行效果截图如下: 引入jquery库构建html 整个代码分为三部分: 1.加载部分loadding : 2. ...
原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画
offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...
JS经典案例-无缝滚动轮播图（纯JS）
滚动轮播图在JS初级阶段,轮播图是最基础最经典的案例,而相比于渐变轮播图,无缝滚动轮播图又要更难一点.渐变轮播图仅需要使用到点击事件.定时器等,而无缝滚动轮播图则需要考虑到第一张>最后一张, ...
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图) 每一步都有详细的注释: <!DOCTYPE html> <html lang="en"> &l ...

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

`html`部分代码

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

最新文章

热门文章

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

html部分代码

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

最新文章

热门文章

`html`部分代码