vue-awesome-swiper 手势缩放无效 10C

问题描述:
想在vue项目中使用vue-awesome-swiper实现相册查看功能,测试的时候发现使用写死的图片src 时手势缩放没有问题,但是图片src集合换到从后台获取到再赋值的,手势缩放就不起作用了,不知道是什么原因。

用的vue template,
后台获取到的数据已经渲染到dom中,手机上测试切换没有问题,双击放大也可以,就是手势缩放或者双击放大后图片不能拖拽移动查看(用写死的图片src是可以的)。

vue项目依赖或版本:

 "devDependencies": {
    "axios": "^0.15.3",
    "babel-plugin-component": "^0.10.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "^0.12.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "lodash": "^4.17.4",
    "postcss-px2rem": "^0.3.0",
    "vue-lazyload": "^1.2.6"
  },
  "dependencies": {
    "fastclick": "^1.0.6",
    "leancloud-realtime": "^4.0.0-alpha.3",
    "leancloud-realtime-plugin-typed-messages": "^3.0.0",
    "leancloud-storage": "^3.4.2",
    "mint-ui": "^2.2.11",
    "moment": "^2.19.1",
    "vee-validate": "^2.0.0",
    "vue": "^2.5.13",
    "vue-awesome-swiper": "^2.6.7",
    "vue-resource": "^1.3.4",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  }

问题出现的环境背景及自己尝试过哪些方法:
试过使用另一个图片预览插件 PhotoSwipe:PhotoSwipe,这个插件体验感比较好,但是插件需要预先知道图片的宽高,这个目前还没有时间研究。

相关代码:

 <style>
    .viewImg .swiper-slide img {
        width: 100%;
    }
</style>


<template>
        <div class="viewImg" >
            <a class="btn-close f-r"><img src="/images/icon-close.png" @click="closeViewer" alt="关闭" title="关闭"></a>

            <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide v-for="img in images" :key="img.id">
                    <div class="swiper-zoom-container">
                        <img :data-src="img.smallSizeUrl" class="swiper-lazy">
                    </div>
                </swiper-slide>

                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
        </div>

</template>

<script>
    import 'swiper/dist/css/swiper.css'  ;
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        components: {
            swiper,
            swiperSlide
        },
        data() {
            return {swiperOption: {
                    allowTouchMove: true,
                    width: window.innerWidth,
                    notNextTick: false,
                    observer:true,//修改swiper自己或子元素时,自动初始化swiper
                    observeParents:true,//修改swiper的父元素时,自动初始化swiper
                    loadPrevNext: true,
                    lazy: {
                        loadPrevNext: true,
                      },
                    lazyLoading : true,
                    lazyLoadingInPrevNext: true, // 设置为true允许将延迟加载应用到最接近的slide的图片(前一个和后一个slide)。
                    zoom: true,
                    grabCursor: true, // 设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。(根据浏览器形状有所不同)
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                }
            }
        },
        //定义这个sweiper对象
        computed: {
            swiper() {
              return this.$refs.mySwiper.swiper;
            }
        },
        mounted () {
            //这边就可以使用swiper这个对象去使用swiper官网中的那些方法
            // this.swiper.slideTo(0, 1, false);    
        },
        props: {
            images: {
                required: true
            }
        },
        methods:{
            closeViewer: function(){
                this.viewImg = false;
            }
        }

    }
</script>

我期待的结果是什么?实际看到的错误信息又是什么:
需要实现流畅的相册查看功能,支持预加载、流畅切换以及手机中手势缩放查看。
vue-awesome-swiper 的demo里可以看到都可以满足目前的主要需求,但是我在项目中出现了以上问题,求助。

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!