el-carousel在新增或者删除el-carousel-item时默认跳到第一页的原因和解决
现象
使用走马灯效果时
当el-carousel-item增加或者减少时,页会跳到第一页
体验很不友好。
原因
当新增或这删除el-carousel-item时,会触发setActiveIndex(props.initialindex),
setActiveIndex的行为是小于0或者大于最大页会有一个clamp的效果再进行跳转,如果是当前页则不跳转
默认的initialindex是0所以就会跳到第一页
解决方案
先默认initialindex为0;
一般新增时我们希望设置为最新的那一页,此时先设置initialindex为当前页,
然后再手动调用setActiveIndex跳到最新添加的那一页。
不过需要先等最新的那一页完成渲染再跳转,否则在动画过渡时出现混乱。
此时可以使用vue自带的nexttick,将手动跳转放到下一帧执行。