使用swiper 遇到的一些问题

使用swiper 遇到的一些问题,第1张

# 设置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)

关于swiper轮播图不显示,但是实际又占了位置(图一)。原因目前也不是很清楚,但只需要删

除app.wxss里的样式display: flex即可,或者自己重写样式覆盖app.wxss的样式在引用重写的样式

即可(图二)。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12000934.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存