問題

當(dāng)走馬燈只有兩項時，第一次切換時動畫效果是右滑蓄诽，第二次切換時變成了左滑

解決辦法

1. 當(dāng)數(shù)據(jù)只有兩項時復(fù)制一遍數(shù)據(jù)媒吗，比如1，2 ==>1闸英，2，1出吹，2
2. 自定義指示器辙喂，在只有兩項時顯示自定義的指示器，同時巍耗，監(jiān)聽自定義指示器的點(diǎn)擊事件，切換幻燈片的索引
3. 同時監(jiān)聽幻燈片的change事件炬太，用以控制自定義指示器的選中樣式

• html代碼

<el-carousel height="215px" trigger="click" @change="changeCarousel" ref="carouselTax" //監(jiān)聽change事件,切換自定義指示器的樣式
                       :indicator-position="taxList.length===2?'none':'outside'">    //當(dāng)只有兩項數(shù)據(jù)時不顯示默認(rèn)的指示器
            <el-carousel-item class="carouselItem" v-for="(group,index) in taxList" :key="index">
              <ul class="dataList" v-for="item in group" :key="item.xzqhId">
                <li class="title">{{ item.xzqhmc }}</li>
                <li class="data">{{ item.value }}</li>
                <li class="describe">當(dāng)期數(shù)據(jù)</li>
              </ul>
            </el-carousel-item>
//復(fù)制一遍亲族，當(dāng)只有兩項時才顯示
            <div  v-if="taxList.length===2">
              <el-carousel-item class="carouselItem"  v-for="(group,index) in taxList" :key="index">
                <ul class="dataList" v-for="item in group" :key="item.xzqhId">
                  <li class="title">{{ item.xzqhmc }}</li>
                  <li class="data">{{ item.value }}</li>
                  <li class="describe">當(dāng)期數(shù)據(jù)</li>
                </ul>
              </el-carousel-item>
            </div>
          </el-carousel>
//當(dāng)只有兩項時顯示自定義的指示器
<ul class="el-carousel__indicators el-carousel__indicators--horizontal el-carousel__indicators--outside"
              v-if="taxList.length===2">
            <li :class="index === indexActive?'is-active':''" class="el-carousel__indicator el-carousel__indicator--horizontal"
                v-for="(group,index) in taxList" :key="index"  @click="handleCarousel(index)">  //點(diǎn)擊指示器霎迫，切換幻燈片的索引
              <button class="el-carousel__button"></button>
            </li>
          </ul>

• Js代碼

methods: {
    changeCarousel(a){
      if (this.taxList.length===2){
        a===2?this.indexActive=0:a===3?this.indexActive = 1:this.indexActive=a
      }else {
        this.indexActive = a
      }
    },
    handleCarousel(index){
      this.$refs.carouselTax.setActiveItem(index)
    },
}

• CSS代碼

 .is-active{
          button{
            background: #c0c4cc;
          }
        }