swiper4.5.1 在移动端缩放图片, 手指缩放无效
<template>
<div class="image-preview">
<div class="swiper-container" ref="mySwiper">
<div class="swiper-wrapper">
<div v-for="(item, index) in imageList" :key="index" class="swiper-slide">
<div class="swiper-zoom-container">
<img :src="item"/>
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-customer" slot="pagination" style="text-align:left"></div>
</div>
</div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import Swiper from 'swiper'
export default {
name: 'imagePreview',
//components: { swiper, swiperSlide },
props: {
imageList: {
type: Array,
default: () => []
},
imageSlide: {
type: Number,
default: () => 0
}
},
data () {
return {}
},
mounted() {
const mySwiper = new Swiper('.swiper-container', {
width: window.innerWidth,
zoom: true,
initialSlide: this.imageSlide,
// 显示分页
pagination: {
type: 'fraction',
el: ".swiper-pagination",
clickable: true, //允许分页点击跳转
currentClass: 'swiper-pagination-current-cutomer',
totalClass: 'swiper-pagination-total-customer'
},
on:{
click: () => {
this.exitImgPreview()
}
}
})
},
methods: {
exitImgPreview() {
this.$emit('exitImgPreview')
}
}
}
代码如上,在移动端点击可以放大图片,手指触摸缩放没有效果,有大神遇到过这个问题吗?求解答一下
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论