在写公司大屏的时候需要使用element跑马灯组件,但由于只有两个数据,在运行时,是默认先向右滑动到第二个item,当到第二个即最后一个后,会进行反方向即向左滑动到第一个item,不符合产品设计要求,遂将数据两条复制为四条(复制过程省略,导致底部出现四条数据的指示器,如图:
这里通过样式控制指示器的显示隐藏,代码块省略部分代码,自己根据需求补充即可
<el-carousel height="100%"
class="warn-carousel-box"
:class="['carousel-indicator' + curIndex]"
arrow="never"
:autoplay="false"
:loop="true"
@change="carouselChange">
<el-carousel-item>
……省略
</el-carousel-item>
</el-carousel>
<sciprt>
const curIndex = ref(0)
let carouselChange = (index, preindex) => {
console.log(index, preindex);
curIndex.value = index
}
</sciprt>
<style scoped>
.carousel-indicator0,
.carousel-indicator1 {
:deep(.el-carousel__indicator) {
&:nth-child(3),
&:nth-child(4) {
display: none;
}
}
}
.carousel-indicator2,
.carousel-indicator3 {
:deep(.el-carousel__indicator) {
&:nth-child(1),
&:nth-child(2) {
display: none;
}
}
}
<style>
完结