题目描述

项目中需要将长图实现移动端指尖滑动缩放，但所放位置与实际放大位置有偏差，比如缩放的是图片上部，实际缩放到的是图片中部，偏差很大，而且出现图片最初不能滑动的问题。

问题出现的环境背景及自己尝试过哪些方法

用的vue-awesome-swiper@2.6.7依赖的是swiper@3.1.3，没有弄太明白图片最开始为什么不能滑动的问题，但通过监听用户的scroll事件，给swiper的父元素添加

content.setAttribute('style', '-webkit-overflow-scrolling: touch;')

这个属性勉强解决了，但效果也不是太好，需要用户先滑动一下才能流畅滑动

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<template>
  <div class="productPage">
    <my-title :titleData="titleData"></my-title>
    <div class="content">
      <div class="contentBox" ref="contentBox">
        <swiper :options="swiperOption" ref="mySwiper" style="height: 100%;">
          <swiper-slide>
            <div class="swiper-zoom-container" data-swiper-zoom="3">
              <img :src="$route.params.url === undefined ? '' :require('../../assets/knowledgeQuiz/' + $route.params.url)">
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import myTitle from '../activity/components/title'
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'productPage',
  data () {
    return {
      titleData: { // 头部信息
        leftHome: 0,
        leftArrow: 1,
        rightContent: 1
      },
      pageData: '',
      // imgPath: ''
      isActivety: false,
      swiperOption: {
        zoom: true
      }
    }
  },
  components: {
    myTitle,
    swiper,
    swiperSlide
  },
  created () {
    this.$loading.hide()
  },
  mounted () {
    this.init()
  },
  methods: {
    init (id) {
      let content = document.querySelector('.content')
      content.addEventListener('scroll', () => {
        content.setAttribute('style', '-webkit-overflow-scrolling: touch;')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.productPage{
  display: flex;
  flex-direction: column;
  height: 100%;
  .content{
    height: 100%;
    overflow: scroll;
  }
  .contentBox{
    img{
      display: block;
      width:100%;
    }
  }
}
</style>

你期待的结果是什么？

希望能解决两个问题：
1.初始化swiper的时候不能滑动
2.放大图片的时候放大的位置有偏差