swiper中的自动播放和滑动失效

1. swiper中设置轮播图的自动播放?

// 首先在mounted () 中 初始化轮播图
mounted () {
    let mySwiper = new Swiper('#post_swiper_'+this.elId, {
      // loop: true,
      observer: true,  // 修改swiper自己或子元素时，自动初始化swiper 
　  observeParents: true,  // 修改swiper的父元素时，自动初始化swiper 
      lazyLoading: true,
      pagination: {
        el: '.swiper-pagination'
      },
      autoplay:{
        delay: 3000,  // 设置轮播的时间
        disableOnInteraction: false,  // 这一行是为了避免手动滑动轮播图后，自动轮播失效，默认为true
      },
    })
  },

2. swiper 中设置了自动轮播，可是切换到别的页面，自动播放失效？

// 这时候 进入到这个页面时，就重新初始化轮播图
methods: {
      swiperInit () {
        this.mySwiper = new Swiper('#post_swiper_' + this.elId, {
            // loop: true,
            observer: true, //修改swiper自己或子元素时，自动初始化swiper 
      　    observeParents: true, //修改swiper的父元素时，自动初始化swiper 
            lazyLoading: true,
            pagination: {
              el: '.swiper-pagination'
            },
            autoplay:{
              delay: 3000,
              disableOnInteraction: false,
            },
          })
      },
}，
// 然后再 activated  () 中初始化话轮播图
activated () {
  console.log('每次进来')
  this.swiperInit()
},

3. swiper中重新改变图片后，轮播图滑动不了?

<template>
  <div class="swiper-container discoverSwiperContainer" :id="'post_swiper_'+elId" v-if="show">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(image,index) in images" :key="index">
        <!-- <img :src="config.imageOrigin+image" alt :data-src="config.imageOrigin+image" class="swiper-lazy" /> -->
        <img
          alt
          :src="image"
          :data-src="image"
          @click="canClick ? handleClick(image) : ''"
        >
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import DiscoverHelper from '../helper'
export default {
  data() {
    return {
      mySwiper: null,
      show: this.pictures
    }
  },
  props: {
    pictures: {
      type: String,
      required: true
    },
    elId: {
      type: String,
      required: true
    },
    canClick: {
      type: Boolean,
      required: false
    },
    allImg:  {
      type: Array,
      required: false
    }
  },
  computed:  {
    images() {
      return this.pictures.split(',')
    }
  },
  watch:  {
    pictures(newV) {
      return newV
    },
    images (newV) { // 监视，每次图片发生变化的时候，都重新初始化轮播图
      // this.mySwiper && this.mySwiper.lockSwipeToPrev()
      // this.mySwiper && this.mySwiper.lockSwipeToNext()
      this.$nextTick(() => {
        this.swiperInit()
      })
      return newV
    }
  },
  mounted () {
    this.mySwiper = new Swiper('#post_swiper_' + this.elId, {
      allowTouchMove: true,
      passiveListeners: false,
      loop: false,
      lazyLoading: true,
      observer: true,
      initialSlide: 0,
      observer: true, // 修改swiper自己或子元素时，自动初始化swiper
      observeParents: true,
      pagination: {
        el: '.swiper-pagination'
      },
      on: {
        zoomChange: function(scale, imageEl, slideEl) {  // 用来缩放轮播图的图片
          console.log(scale, 'scale')
        }
      }
    })
  },
  methods: {
    swiperInit() {
      this.mySwiper = new Swiper('#post_swiper_' + this.elId, {
        // zoom: true,
        // zoomToggle :false, //设置为false 不允许双击缩放，只允许手机端缩放
        passiveListeners: false,
        // allowTouchMove: true,
        loop: false,
        lazyLoading: false,
        observer: true,
        initialSlide: 0,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,
        pagination: {
          el: '.swiper-pagination'
        }
      })
    }
  }
}
</script>
<style lang="less">
.discoverSwiperContainer {
  .swiper-slide {
    img {
      max-height: 133vw;
    }
  }
}
</style>