使用swiper 遇到的一些问题

Posted 2023-03-17

参考技术A # 设置loop为true时滚动echarts的时候会有一些空白页面出现

原因其实很简单，loop为true的时候，swiper为了能够向一个方向进行滚动进行了一些简单的dom复制操作，而在复制的过程中没有将canvas复制进去，所以产生了空白页

## 解决办法：1、利用swiper的回调函数找到当前的activeIndex判断滚动的页面重新绘制echart图

## 解决办法：2、vant的滚动组件不是单纯的复制dom，所以设置成持续像一个方向滚动时不会出现空白页面

## 鼠标停留时停止滚动，离开的时候开始滚动

```js

    //在mouseleave事件触发的时候调用

        swiper.stopAutoplay();

  //在mouseenter事件触发的时候调用

        swiper.startAutoplay();

```

###自己犯傻的一个问题，但是我用的是vue-awesome-swiper，我在组件上用了@mouseleave和mouseenter的时候怎么都不触发事件，把我给整傻了，仔细想了下其实加上native修饰符就可以了，顺便记录下mouseover和mouseenter的区别

mouseover和mouseenter的区别

大概区别就是mouseover在目标内部进入子节点后会重复的多次触发事件，而mouseenter进入后只会触发一次

```

mouseover和mouseout 是一对

mouseenter和mouseleave是一对

```

（带o的是一对，不带o的是一对，带o的不止触发once）