当前位置：首页 > article >正文

Element走马灯组件循环播放两个页面是方向不一致

article 2024/9/19 22:34:41

摘要：使用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 = true
        this.bookMarkItemList = this.bookMarkItemList.concat(this.bookMarkItemList)
      }
    },
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    // el-carousel组件的chang事件,只支持传入index
    carouselChange(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

查看全文

http://www.kler.cn/news/311018.html