想在vue项目中使用vue-awesome-swiper实现相册查看功能，测试的时候发现使用写死的图片src 时手势缩放没有问题，但是图片src集合换到从后台获取到再赋值的，手势缩放就不起作用了，不知道是什么原因。（代码详情见思否SF：vue-awesome-swiper 手势缩放无效 ）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;
}
}
}（慕课的代码编辑太难看了）
添加回答
举报
0/150
提交
取消