element-ui走马灯使用心得

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

解决办法：复制一份单独处理[1,2,1,2]

代码：

问题二：在分页的时候轮播顺序不一致

解决办法：每次更新数据使用 key 来重置dom

 

:key="carouselUpdate">

getdata() {

        this.carouselUpdate+=1;

}        

问题三：鼠标移入时不停止轮播

解决办法：清除原本的鼠标移入事件 

@mouseenter.native="delHandleMouseEnter(index)"

// 鼠标移入卡片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监听页面缩放（另一博文）