同一界面多次使用同一个swiper实现不同效果

同一界面多次使用同一个swiper实现不同效果

定义swiper组件

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  props: ["preview", "myclassname"],
  mounted() {
    var mySwiper = new Swiper("." + this.myclassname, {
      slidesPerView: this.preview,
      spaceBetween: 30,
    });
  },
};
</script>
<style lang="scss" scoped>
.swiper-wrapper {
  img {
    width: 100%;
  }
}
</style>

在detail中插入swiper组件。

<!-- swiper1 -->
    <h2>演职人员</h2>
    <swiper preview="4" class="actorswiper" myclassname="actorswiper">
      <div class="swiper-slide" v-for="data in filmminifo.actors" :key="data.name">
        <img :src="data.avatarAddress" alt />
        <p>{{data.name}}</p>
        <p>{{data.role}}</p>
      </div>
    </swiper>
<!-- swiper2 -->
    <h2>剧照</h2>
    <swiper preview="3" class="photoswiper" myclassname="photoswiper">
      <div class="swiper-slide" v-for="(data,index) in filmminifo.photos" :key="index">
        <img :src="data" alt />
      </div>
    </swiper>

通过父穿子，在子组件（swiper）中用prop接收父组件（detail）传过来的数据。
在初始化swiper组件的时候，通过不同的“myclassname”来实现创建不同的swiper的效果。

最终效果：