自动播放，有个bug about vue-awesome-swiper HOT 23 CLOSED

v3.1.3仍然存在问题
强制update或者slideNext都没有效果

from vue-awesome-swiper.

  activated() {
    this.$nextTick(function() {
      if (this.$refs.swiper) {
        this.$refs.swiper.swiper.slideTo(this.realIndex, 1, false);
      }
    });
  },
  deactivated() {
    this.realIndex = this.$refs.swiper.swiper.realIndex;
  }

from vue-awesome-swiper.

@dingtwo 我会在下个版本增加此修复，但这可能需要点时间，因为我正在将项目规范化、国际化。

from vue-awesome-swiper.

v3.0.0 已解决此问题。

from vue-awesome-swiper.

可以换个思路，从浏览器的事件入手。 just like this：（vue-awesome-swiper版本：4.1.1，也验证3.1.3此方法也可生效，调整下swiper实例的获取方式即可）

export default {
  name: "swiper-example-vertical",
  title: "Vertical slider",
  components: {
    Swiper,
    SwiperSlide
  },
  methods: {
    linkGoTo(url) {
      window.open(url, "_self");
    }
  },
  data() {
    return {
      swiperOption: {
        direction: "vertical",
        loop: true,
        // autoplay: false,
        // 自动播放
        autoplay: {
          delay: 300,
          disableOnInteraction: false
        },
        // 设置轮播
        effect: "fadeEffect",
        //滑动速度
        // speed: 500,
        loopedSlides: 3,
        slidesPerView: 3,
        observer: true,
        observeParents: true
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  mounted: function() {
    window.onpageshow = function(event) {
      // console.log('page show')
      // console.log(this.swiper.slideNext);
      if (event.persisted) {
        if (this.swiper) {
          this.swiper.animating = false;
          this.swiper.slideNext();
        }
      }
    }.bind(this);
  }
};

当然，当页面展示事件触发时，可以用slideTo(swiper.activeIndex)但是突然跳到某一页会令人感到突兀，而且swiper.activeIndex这个明明是个数字却无法作为slideTo入参，具体的数字才可以触发，很神奇不做讨论了。 this.swiper.animating = false;根据slideNext函数的打印发现加上这个才可以正常触发（或者swiper配置中可以设置）。
另外，除了事件中主动让它轮播到下一页，disableOnInteraction: false这个也要加上。
之前也尝试过上面的那些方法却无法为前端小妹解决问题，此方法可行故特告知。具体请看：https://www.jianshu.com/p/c4188216a600

from vue-awesome-swiper.

感谢反馈，即将修复。

from vue-awesome-swiper.

经测试，我这里没有重现所描述的问题，可否提供更详细的代码。

swiperOption: {
          autoplay: 1000,
          setWrapperSize :true,
          autoHeight: true,
          pagination : '.swiper-pagination',
          paginationClickable :true,
          mousewheelControl : true,
          observeParents:true,
          grabCursor : true,
          // Disable preloading of all images
          preloadImages: false,
          // Enable lazy loading
          lazyLoading: true
}

from vue-awesome-swiper.

你好，我的代码如下：

模版代码

<swiper :options="swiperOption">
    <swiper-slide v-if="index==0" v-for="(item,index) in home.banners">
        <a :href="item.url">
            <img class="swiper-lazy" v-bind:src="item.pic_url" alt="">
        </a>
    </swiper-slide>
    <swiper-slide v-if="index>0" v-for="(item,index) in home.banners">
        <a :href="item.url">
            <img class="swiper-lazy" v-bind:data-src="item.pic_url" alt="">
        </a>
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
</swiper>

配置代码

swiperOption: {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
pagination: '.swiper-pagination',
paginationClickable: true,
// Disable preloading of all images
preloadImages: false,
// Enable lazy loading
lazyLoading: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 4000,
autoplayDisableOnInteraction: false
},

from vue-awesome-swiper.

2.1.0可以手动控制keep-alive的作用组件，可以用这个功能先解决问题。

from vue-awesome-swiper.

@cgygd 你这个问题处理了没有，我也遇到同样的问题，一直没找到解决的办法。

from vue-awesome-swiper.

@qiheng 没有，2.1.0可以手动控制keep-alive的作用组件，用这个功能先解决问题。

from vue-awesome-swiper.

@cgygd 手动控制keep-alive的作用组件，那就是说我整个页面就没有缓存了
<template> <div id="app"> <transition name="slide-left" mode="out-in"> <keep-alive> <router-view class="child-view"></router-view> </keep-alive> </transition> <x-loading :show="config.pageLoading"></x-loading> </div> </template>

from vue-awesome-swiper.

@qiheng 你可以尝试在 https://github.com/surmon-china/vue-awesome-swiper/blob/master/src/swiper.vue#L47 这里增加对应的生命周期钩子完成 swiper的 update 方法，如果可行，可以提交 PR.

from vue-awesome-swiper.

在生命周期activated 方法中调用 update 方法，亲测有效

activated() {
	  this.swiper.update()
  },

from vue-awesome-swiper.

我也遇到过这个问题 不过我当时用的是vux里面的轮播图，现在也还没解决，好像部分机型会出现这个问题

from vue-awesome-swiper.

升级到 v3.0.0

from vue-awesome-swiper.

求助
1：3.0.0 loop为false时 还存在该问题
采取的解决方法是：
activated() {
this.$nextTick(function() {
let mySwiper = this.swiper;
mySwiper.autoplay.timeout = undefined;
mySwiper.autoplay.running = false;
mySwiper.autoplay.start();
})
}
2：但是 当loop置为true 时 又会出现存在这个问题。

from vue-awesome-swiper.

我最后把这一页的keepalive关了。。

from vue-awesome-swiper.

v3.1.3仍然存在问题
强制update或者slideNext都没有效果

from vue-awesome-swiper.

我又来了...，当轮播图操作后无法自动轮播，即使设置了disableOnInteraction: false,也不行，嗯...顺便有个需求，能否动态改变轮播时间
swiperOption: { autoplay: { delay: 2000, disableOnInteraction: false }, touchStartPreventDefault: false, loop: true, on: { slideChange: function () { } } },
目前虽然解决动态改变轮播间隔问题，但觉得不是理想中的方法..

from vue-awesome-swiper.

求助
1：3.0.0 loop为false时 还存在该问题
采取的解决方法是：
activated() {
this.$nextTick(function() {
let mySwiper = this.swiper;
mySwiper.autoplay.timeout = undefined;
mySwiper.autoplay.running = false;
mySwiper.autoplay.start();
})
}
2：但是 当loop置为true 时 又会出现存在这个问题。

请问这个问题现在解决了吗

from vue-awesome-swiper.

在生命周期activated 方法中调用 update 方法，亲测有效

activated() {
	  this.swiper.update()
  },

我按照这个方法修改了代码 但还是不行，请问现在这个问题解决了吗？

from vue-awesome-swiper.

经排查，keepalive缓存的页面依旧会自动播放，导致返回缓存页面时realIndex对应不上。
解决办法：
activated() { if(this.swiper) { this.swiper.autoplay.start() } }, deactivated() { if(this.swiper) { this.swiper.autoplay.stop() } }

from vue-awesome-swiper.