问题
当走马灯只有两项时,第一次切换时动画效果是右滑,第二次切换时变成了左滑
解决办法
- 当数据只有两项时复制一遍数据,比如1,2 ==>1,2,1,2
- 自定义指示器,在只有两项时显示自定义的指示器,同时,监听自定义指示器的点击事件,切换幻灯片的索引
- 同时监听幻灯片的change事件,用以控制自定义指示器的选中样式
- html代码
<el-carousel height="215px" trigger="click" @change="changeCarousel" ref="carouselTax" //监听change事件,切换自定义指示器的样式
:indicator-position="taxList.length===2?'none':'outside'"> //当只有两项数据时不显示默认的指示器
<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">当期数据</li>
</ul>
</el-carousel-item>
//复制一遍,当只有两项时才显示
<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">当期数据</li>
</ul>
</el-carousel-item>
</div>
</el-carousel>
//当只有两项时显示自定义的指示器
<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)"> //点击指示器,切换幻灯片的索引
<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;
}
}