問題一：只有兩個圖片時滾動順序錯誤

解決辦法：復制一份單獨處理[1,2,1,2]

代碼：

<el-carousel indicator-position="none" arrow="never" :interval="3000" ><el-carousel-item v-for="(myitem, myindex) in item.fileList" :key="myindex"><img :src="myitem.filePath" style="width:100%;height:100%"/></el-carousel-item><div v-if="item.fileList.length==2"><el-carousel-item v-for="(myitem, myindex) in item.fileList" :key="myindex"><img :src="myitem.filePath" style="width:100%;height:100%"/></el-carousel-item></div></el-carousel>

問題二：在分頁的時候輪播順序不一致

解決辦法：每次更新數據使用 key 來重置dom

? <div class="list-main" :key="carouselUpdate"></div>

getdata() {

????????this.carouselUpdate+=1;

}????????

問題三：鼠標移入時不停止輪播

解決辦法：清除原本的鼠標移入事件?

@mouseenter.native="delHandleMouseEnter(index)"

<el-carousel ref="carousel" indicator-position="none" arrow="never" :interval="3000" ?:height="carousHeight" @mouseenter.native="delHandleMouseEnter(index)">?<div v-if="item.imgTxt && item.imgTxt.length>0"><el-carousel-item v-for="(myitem, myindex) in item.imgTxt" :key="myindex"><img v-if="myitem.filetype=='.jpeg'" :src="myitem.filepath" ?width="100%" height="100%"/><vue-core-video-player v-else preload="nona" :controls="false" :autoplay="false" :src="myitem.filepath"></vue-core-video-player></el-carousel-item></div><div v-if="item.imgTxt && item.imgTxt.length==2"><el-carousel-item v-for="(myitem, myindex) in item.imgTxt" :key="myindex"><img v-if="myitem.filetype=='.jpeg'" :src="myitem.filepath" width="100%" height="100%"/><vue-core-video-player v-else preload="nona" :controls="false" :autoplay="false" :src="myitem.filepath"></vue-core-video-player></el-carousel-item></div><div v-if="item.imgTxt && item.imgTxt.length==0"><el-carousel-item v-for="(item,index) in 4" :key="index"><img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" width="100%" height="100%"/></el-carousel-item></div></el-carousel>

// 鼠標移入卡片banner不停止

delHandleMouseEnter(index) {

? ? ? this.$refs.carousel[index].handleMouseEnter = () => {}

},

為了第一次鼠標進入就觸發，需要在mounted方法中寫，而且輪播圖是多張，所以需要循環遍歷index，經過嘗試在mounted的時候獲取不到dom,可在數據更新后且dom重置后再進行操作。

getdata() {

????????this.carouselUpdate+=1;

????????this.$nextTick(e=>{

? ? ? ? ? ? ? this.$refs.carousel.forEach((item, index) => {

? ? ? ? ? ? ? ? this.$refs.carousel[index].handleMouseEnter = () => {}

? ? ? ? ? ? ? })

? ? ? ? ? })

}????????

問題四：輪播區域高度自適應

解決辦法：vue監聽頁面縮放（另一博文）

總結

以上是生活随笔為你收集整理的element-ui走马灯使用心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。