0

今天在使用swiper4 的时候,做了一个图片预览。当开启了zoom后,发现ios图片放大时,图片变得很模糊,不是原图,而在安卓设备中都正常。

下面是我的swiper配置项

swiperOption: {
        // 所有的参数同 swiper 官方 api 参数
        on: {
          init: function () {
            _this.$emit('slideChange', this.activeIndex)
          },
          slideChange: function () {
            _this.$emit('slideChange', this.activeIndex)
          }
        },
        observer: true,
        cache: false, // 关闭缓存
        zoom: true, // 可放大
        virtual: true, // 开启虚拟Dom
        init: false, // 默认未初始
        lazy: {
          // 设置图片懒加载
          loadPrevNext: true
        }
      }

有没有遇到同样问题的,求解答

2018-07-06 提问

1 个回答

1

已采纳

问题已经解决,这个问题是由于IOS对transform的兼容性存在一定的问题。当translate3d和scale一起使用的时候,就会出现图片放大后模糊的问题。
解决方法:
找到项目依赖的swiper文件夹(node_modules/swiper/js/swiper.js)然后将其中

gesture.$imageEl.transition(300).transform(("translate3d(0,0,0) scale(" + (zoom.scale) + ")"));

改为

gesture.$imageEl.transition(300).transform(("translate(0,0) scale(" + (zoom.scale) + ")"));

就可以了。

推广链接