element-ui走马灯使用心得-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui走马灯使用心得。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题一：只有两个图片时滚动顺序错误

解决办法：复制一份单独处理[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

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 = () => {}

})

}