使用swiper, swiperSlide切换

<template>
  <!-- 科普宣传 -->
  <div class="propaganda-wrapper">

    <!-- 模块内轮播 -->
    <swiper v-if="publicizeList.length && autoWay == '0' > 0" :options="swiperOptionPublicize" ref="mySwiperPublicize"
      class="publicize-list">

      <swiper-slide v-for="(item, i) in publicizeList" :key="i">

        <img class="publicize-img" :src="picApi + '?fileId=' + item.image" alt="" />

      </swiper-slide>

    </swiper>

    <!-- 模块间轮播 -->
    <img v-if="publicizeList.length && autoWay == '1'" class="publicize-img"
      :src="picApi + '?fileId=' + publicizeList[activeIndex].image" alt="" />

  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: 'propaganda',
  components: {
    swiper,
    swiperSlide,
  },
  props: {
    'autoWay': {
      required: true,
      type: String
    },
    'autoTime': {
      required: true,
      type: String
    }
  },
  data() {
    let that = this
    return {
      swiperOptionPublicize: {
        // notNextTick: true,
        slideToClickedSlide: true,
        // centeredSlides: true, //居中去除左右空闲区域，默认左对齐
        // spaceBetween: '1%',
        slidesPerView: 1, //每行能放多少个
        loop: true, // 循环模式
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false, //true 不重复，到了最后一个就停在最后一个
          disableOnInteraction: true //操作swiper之后自动切换不会停止，每次都会重新启动autoplay
        },
        speed: 1000,
        observer: true, //开启动态检查器，监测swiper和slide
      },
      index: 0,
      publicizeList: [],
      picApi: that.api.loadPicById, // 显示图片
      activeIndex: 0, // 当前展示图片索引
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiperPublicize.swiper;
    },
  },
  mounted() {
    this.initImg()
    // 获取当前展示图片索引，设置下一张展示图片索引
    if (this.autoWay == '1' && localStorage.getItem('imgIndex')) {
      this.activeIndex = localStorage.getItem('imgIndex')
      localStorage.setItem("imgIndex", Number(this.activeIndex) + 1);
    } else {
      localStorage.setItem("imgIndex", 1);
    }

  },
  methods: {
    initImg() {
      let url = this.api.listSciencePropaganda
      const params = new FormData()
      // params.append('status', 1)
      this.$axios.post(url, params).then(response => {
        let res = response.data
        if (res.code == '200') {
          this.publicizeList = res.data
          if (this.autoWay == '0') {
            setTimeout(() => {
              // 计算模块内轮播图片停留时间
              if(res.data.length != 0){
                this.$refs.mySwiperPublicize.swiper.params.autoplay.delay = (Number(this.autoTime) / res.data.length - 1) * 1000
              }
            }, 200);
          } else {
            // 模块间轮播：最后一张图片结束，展示第一张图片
            if (Number(this.activeIndex) === this.publicizeList.length) {
              this.activeIndex = 0
              localStorage.setItem("imgIndex", 0);
            }
          }

        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style scoped>
.propaganda-wrapper {
  width: calc(100% - 60px);
  height: calc(100% - 44px);
  padding-top: 24px;
  margin: 0 auto;
}

.publicize-list {
  display: flex;
  justify-content: space-between;
  /* width: 100%; */
  height: 100%;
}

.publicize-img {

  /* height: 388px; */
  width: 100%;
  height: 100%;
}
</style>