使用iview组件的跑马灯只能一次显示一个内容,但是vue-slick-carousel的跑马灯可以控制一次显示一个内容还是同时显示多个内容,还可以设置垂直滚动的跑马灯
先把依赖下下来
npm i vue-slick-carousel
然后在页面中引入资源
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
// optional style for arrows & dots
import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";
作为组件添加到项目里面
components: { VueSlickCarousel },
在页面中使用
<VueSlickCarousel
class="right-center-carousel"
style="width: 100%"
v-bind="carouselOptions"
>
<div
v-for="(item, index) in rightCenterCarousel"
:key="index"
class="insect-item"
>
<div class="insect-item-top">
{{ item.name }}
</div>
<div class="insect-item-bottom">
{{ item.num }}
</div>
</div>
</VueSlickCarousel>
添加配置项
carouselOptions: {
infinite: true, //是否无限循环展示内容
arrows: false, //展示箭头
dots: false, //启用点指示器
slidesToShow: 4, // 同时显示的项目数量
slidesToScroll: 1, // 每次滚动的项目数量
autoplay: true, // 自动播放
autoplaySpeed: 2000, // 切换时间间隔
},
如果是想要竖直滚动的话添加的配置项如下
vertical: true,
verticalSwiping: true// 垂直滑动
效果如图所示,根据上面的配置项可以隔2秒钟就向左移动一个位置
在使用这个走马灯的时候还遇到了问题,就是从接口获得的数据导致初始化的时候页面报错,无法正常显示走马灯
解决的办法就是在组件上判断一下绑定的数组的长度,长度大于0的时候,才显示走马灯
<VueSlickCarousel
class="carousel-verticle-box"
v-bind="carouselOptions"
:style="{height: '100%'}"
v-if="futureArr.length!==0"
>