首页 › Swiper3 交流 › swiper手机端bug，大神出手相助

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

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

<template>
<section class="scroll-wrapper" :style="{ height: clientHeight + 'px' }">
    <section class="main-wrapper">
      <swiper :options="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少一些

查看完整版本: swiper手机端bug，大神出手相助