swiper手机端bug，大神出手相助

jianghanhanhan · 发表于 2018-1-3 10:18:51

<template>
<section class="scroll-wrapper" :style="{ height: clientHeight + 'px' }">
<section class="main-wrapper">
<swiper

ptions="swiperOption">
      <div class="swiper-slide" v-for="picture in pictures">
         <div class="swiper-zoom-container">
            <img class="swiper-img" v-bind:src="picture.url"/>
         </div>
      </div>
      <div v-show="pictures.length > 1" class="swiper-pagination" slot="pagination"></div>
      </swiper>
</section>
  </section>
</template>

<script>
import {getScrollTop, getWindowHeight, setDocumentTitle} from '../../../../../static/h5/utils/interaction'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import PackageSpecs from '../../components/PackageSpecs'
import Btn from '../../components/Btn'

export default {
  data () {
return {
   newsId: '',
   pictures: [],
   bullets: true,
   clientHeight: 0,
   swiperOption: {
      zoom: true,
      notNextTick: true,
      mode: 'horizontal',
      speed: 300,
      loop: false,
      observer: true,
      observeParents: true,
      pagination: '.swiper-pagination',
      paginationClickable: true,
      spaceBetween: 30
   }
}
  },
  ready () {
let params = {
   newsId: this.$route.query.newsId
}
this.$resource('main/news/get-news-detail').get(params).then((resp) => {
   let news = resp.data.item
   this.pictures = news.pictures
})
setDocumentTitle('品牌要闻')
  },
  components: {
swiper,
swiperSlide,
PackageSpecs,
Btn
  }
}
</script>

<style lang="less" scoped>
@import "./shownewspictures.less";
</style>

是在vue里面引入的swiper，之前用多个div包裹img，用静态的图片url 一切都可以正常使用，换上v-for之后动态的从后台拿数据就出现手滑放大失效，双击放大，图片无法拖动的情况

jianghanhanhan · 发表于 2018-1-3 10:25:50

图片双击放大之后，再拖动就会出现重叠的情况

xiaofu · 发表于 2018-1-5 11:32:44

遇见相同情况，有木有长的帅的，美的来解决下

xiaofu · 发表于 2018-1-5 11:35:11

这个是swiper的bug还是vue-awesome-swiper的bug呢，楼主github上问了么

xiaofu · 发表于 2018-1-5 17:55:24

我发现是swiper-zoom-container的translate没有变化造成的，只是放大的一瞬间变化了，再拖动的时候就只是swiper-wrapper的tranlate在变化，正常应该是swiper-zoom-container的translate变化就正常了，问题找到了，具体怎么改我还在看

xiaofu · 发表于 2018-1-7 15:08:37

自己已经解决了，需要在swiperOption里面init:false，然后异步取得数据后重新init才行，因为默认int还没数据放大后swiper-zoom-container不会正常translate，我在github问过也关闭了这个问题，希望对你有帮助

jianghanhanhan · 发表于 2018-1-10 17:07:11

xiaofu 发表于 2018-1-7 15:08
自己已经解决了，需要在swiperOption里面init:false，然后异步取得数据后重新init才行，因为默认int还没数 ...

export default {
  data () {
return {
   newsId: '',
   pictures: [],
   bullets: true,
   clientHeight: 0,
   swiperOption: {
      init: false,
      zoom: true,
      notNextTick: true,
      mode: 'horizontal',
      speed: 300,
      loop: false,
      observer: true,
      observeParents: true,
      pagination: '.swiper-pagination',
      paginationClickable: true,
      spaceBetween: 30
   }
}
  },
  ready () {
let params = {
   newsId: this.$route.query.newsId
}
this.$resource('main/news/get-news-detail').get(params).then((resp) => {
   let news = resp.data.item
   this.pictures = news.pictures
   this.init = true
})
setDocumentTitle('品牌要闻')
  },
  components: {
Hammer,
swiper,
swiperSlide,
PackageSpecs,
Btn
  }
}
</script>

<style lang="less" scoped>
@import "./shownewspictures.less";
</style>

是这样操作吗，还是没有效果呢

jianghanhanhan · 发表于 2018-1-10 17:25:49

jianghanhanhan 发表于 2018-1-10 17:07
export default {
data () {
return {

我的一直都是在swiper-zoom-container 的translate里面变化的

jianghanhanhan · 发表于 2018-1-11 20:21:08

xiaofu 发表于 2018-1-7 15:08
自己已经解决了，需要在swiperOption里面init:false，然后异步取得数据后重新init才行，因为默认int还没数 ...

对我再看了一下，但是我不知道在那里init，能告知一下吗

xiaofu · 发表于 2018-1-18 08:54:11

获取数据回调里面直接this.swiper(自己的名字).init()就可以了；或者用了async和await就写在那个函数下面就行，不过如果你的图片很多或者做阅读器等的话，建议不要用这个插件，因为我又发现别的新bug了，还是原始swiper引入使用靠谱点，想比较而言bug少一些