问题背景:
使用element ui的走马灯Carousel的时候。发现当轮播的数量为2时,循环操作的方向是两个容器来回切换,而不是单一方向进行循环切换。
解决思路:
当内容数量大于2时,可以正常显示,我们可以直接复制一份当前的数据,进行当前的循环操作,这样就可以解决问题。
但是当我们启用下指示器时,就会出现4个指示器,这样就会出现问题,我们可以判断当前是否是属于第一组数据还是第二组数据,通过class类名,显示或隐藏下方的指示器,该方法只针对两个内容出现的方向问题。
解决方法:
<div :class="[{ 'loopTwoImg': imgStatus }, { 'loopOneImg': !imgStatus }]">
<el-carousel @change="carouselChange" indicatorPosition="none" arrow="true" loop="true" indicator-position
trigger="click">
<template v-for="item in 2" :key="item">
<el-carousel-item>
<img @click="onOpenActivityPage" src="" />
</el-carousel-item>
<el-carousel-item>
<img @click="onOpenComputePage" src="" />
</el-carousel-item>
</template>
</el-carousel>
</div>
<script>
const state = reactive({
imgStatus: true
})
const carouselChange = (data) => {
if (data == 0 || data == 1) {
//当为第一组数据的时候,打开当前的指示器,隐藏第二组数据的指示器
state.imgStatus = true
} else {
//当为第二组数据的时候,打开当前的指示器,隐藏第一组数据的指示器
state.imgStatus = false
}
}
</script>
<style lang="less" scoped>
/deep/ .loopOneImg {
.el-carousel__indicators {
&>li:nth-child(1),
&>li:nth-child(2) {
display: none;
}
}
}
/deep/ .loopTwoImg {
.el-carousel__indicators {
&>li:nth-child(3),
&>li:nth-child(4) {
display: none;
}
}
}
</style>