swiper3.x和4.x华为浏览器的兼容性问题

最新推荐文章于 2024-08-07 19:25:09 发布

quan

最新推荐文章于 2024-08-07 19:25:09 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： swiper html5

本文链接：https://blog.youkuaiyun.com/quan/article/details/89638874

在电商网站面料图与大图联动展示中，遇到滑动面料图后点击无法同步大图的问题，尤其在部分华为机型的浏览器及微信下。升级至Swiper4.x并使用update()方法后，解决了动态加载图片的监听问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做电商网站的面料图与大图联动展示效果时，遇到了滑动面料图后点击一个面料，无法将大图滑动到指定面料的效果图。其中的面料图是ajax动态读取，使用myswiper.appendSlide(data.colorlist.split(','))方法添加，并没有使用myswiper.update()方法更新，导致部分华为机型（mate10、mate 20pro 、P20）的浏览器及微信下点击无法监听，但是其他品牌的浏览器及微信下均正常。

由于旧版本是用swiper3.x实现的两个轮播联动，本以为升级4.x就能解决问题，最终问题却出在ajax加载未使用update()。

前端页面效果如下：