vue-awesome-swiper 手势缩放无效

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

vue template中：

style:

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

html 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>

js:

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;            
}        
}    
}

（慕课的代码编辑太难看了）

Tsukiis

浏览 2192回答 1

vue-awesome-swiper 手势缩放无效

1回答