摘要：使用Carousel 走马灯循环播放同一类型的图片、文字等内容，会在循环内容为两组是出现下图 [1]中的现象。本文记录下如何解决
之前项目遇到过一次这个问题，由于indicator-position 指示器不用显示，则判断内容长度为2时，复制一份原数据（数据和图片达4组）即可解决。这次再次遇到沿用原来的办法复制数据后，完善对底部指示器的处理。
解决思路：复制数据后4个指示器，展示内容1，2时隐藏指示器3，4；反之，展示内容3，4是隐藏1，2。
首先，在引入的组件中增加相关样式和属性。
<el-carousel height="350px" :class="[{'twoLoopInitData':isInitData && isDataTwoLoop},
{'twoLoopCopyData':!isInitData && isDataTwoLoop}]" :interval="6000" @change="carouselChange"><el-carousel-item v-for="(itemList, index) in bookMarkItemList" :key="index"><div class="content-wrapper"><!-- 展示内容--></div></el-carousel-item>
</el-carousel>
其次，判断内容是不是两页，若是则复制数据。此处绑定的数据bookMarkItemList是接口返回的，可能会变化，通过watch监听bookMarkItemList，判断其长度是否为2，则isDataTwoLoop = true。还会通过el-carousel组件的chang事件判断索引是isInitData(第1，2页)还是复制的数据。
<script>
export default {data() {return {bookMarkItemList: [],isInitData: true,isDataTwoLoop: false,}},computed: {},watch: {bookMarkItemList() {if (this.bookMarkItemList.length === 2) { // 解决走马灯两页显示滑动方向不正确的问题this.isDataTwoLoop = truethis.bookMarkItemList = this.bookMarkItemList.concat(this.bookMarkItemList)}},},mounted() {},beforeDestroy() {},methods: {// el-carousel组件的chang事件,只支持传入indexcarouselChange(index) {if(index === 0||index === 1){this.isInitData = true}else{this.isInitData = false}}, },
}
</script>
最后，依据上述判断结果，原始数据展示时，则隐藏复制数据的指示器；展示复制数据则隐藏原始数据的指示器。::v-deep是为了修改Element默认样式
.twoLoopCopyData{ // 解决走马灯两页切换时，方向不对的问题::v-deep .el-carousel__indicators{&>li:nth-child(1),&>li:nth-child(2){display: none;}}
}.twoLoopInitData{::v-deep .el-carousel__indicators{&>li:nth-child(3),&>li:nth-child(4){display: none;}}
}
总结：问题的解决思路很清晰，上述代码可直接套用
[1] https://blog.csdn.net/Working_hard_111/article/details/131833892
