Vue使用swiper問題怎么解決

本文小編為大家詳細介紹“Vue使用swiper問題怎么解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue使用swiper問題怎么解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、下載指定版本swiper

npm i swiper@5.2.0

二、創建輪播圖組件CarouselContainer.vue

詳細解析在代碼注釋中

<template>
  <div
    class="CarouselContainer"
    @mouseenter="stopAutoPlay"
    @mouseleave="startAutoPlay"
  >
    <div ref="mySwiper" class="swiper-container" :id="currentIndex">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide my-swiper-slide"
          v-for="(item, index) of slideList"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <!-- 分頁器 -->
      <!-- <div class="swiper-pagination"></div> -->
      <!--導航器-->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
export default {
  name: "CarouselContainer",
  props: ["slideList", "currentIndex"],
  data() {
    return {
      currentSwiper: null,
    };
  },
  watch: {
    //slide數據發生變化時,更新swiper
    slideList: {
      deep: true,
      // eslint-disable-next-line
      handler(nv, ov) {
        console.log("數據更新了");
        this.updateSwiper();
      },
    },
  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    //鼠標移入暫停自動播放
    stopAutoPlay() {
      this.currentSwiper.autoplay.stop();
    },
    //鼠標移出開始自動播放
    startAutoPlay() {
      this.currentSwiper.autoplay.start();
    },
    //初始化swiper
    initSwiper() {
      // eslint-disable-next-line
      let vueComponent = this; //獲取vue組件實例
      //一個頁面有多個swiper實例時，為了不互相影響,綁定容器用不同值或變量綁定
      this.currentSwiper = new Swiper("#" + this.currentIndex, {
        // 循環模式選項loop，默認為false，可動態設置，當slide只有一頁時置為false，>1頁時置為true
        loop: true, // 循環模式選項
        autoHeight: "true", //開啟自適應高度,容器高度由slide高度決定
        //分頁器
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable:true,//分頁器按鈕可點擊
        // },
        //grabCursor: true, //小手掌抓取滑動
        // direction: "vertical", // 縱向滾動,默認是橫向滾動的
        on: {
          //此處this為swiper實例
          //切換結束獲取slide真實下標
          slideChangeTransitionEnd: function () {
            console.log(vueComponent.$props.currentIndex+"號swiper實例真實下標",this.realIndex)
          },
          //綁定點擊事件,解決loop:true時事件丟失
          // eslint-disable-next-line
          click: function (event) {
            console.log("你點擊了"+vueComponent.$props.currentIndex+"號swiper組件")
          },
        },
        //導航器
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: {
          //自動播放,不同版本配置方式不同
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false, // 用戶操作之后是否停止自動輪播默認true
        },
        slidesPerView: 1, //視口展示slide數1
        slidesPerGroup: 1, //slide數1頁一組
      });
    },
    //銷毀swiper
    destroySwiper() {
      try {
      // 此處destroy(bool1,bool2)
      // bool1代表是否銷毀swiper實例
      // bool2代表是否銷毀swiper樣式（導航器、分頁器等）
        this.currentSwiper.destroy(true, false);
      } catch (e) {
        console.log("刪除輪播");
      }
    },
    //更新swiper（先銷毀 再 重新初始化swiper）
    updateSwiper() {
      this.destroySwiper();
      this.$nextTick(() => {
        this.initSwiper();
      });
    },
  },
  // 組件銷毀之前 銷毀 swiper 實例
  beforeDestroy() {
    this.destroySwiper();
  },
};
</script>
<style scoped lang="scss">
.CarouselContainer {
  width: 100%;
  height: 100%;
  background-color: gray;
}
/*slide樣式*/
.my-swiper-slide {
  height: 300px;
  background-color: pink;
}
/*swiper容器樣式*/
.swiper-container {
  width: 700px;
  border: 1px solid red;
}
//   /*自定義分頁器按鈕被點擊選中時的樣式*/
//   ::v-deep(.swiper-pagination-bullet-active){
//     background-color: #d5a72f !important;
//     width: 20px;
//   }
//   /*自定義分頁器按鈕常規樣式*/
//   ::v-deep(.swiper-pagination-bullet){
//     background-color: #9624bf;
//     opacity: 1;
//     width: 20px;
//   }
</style>

三、創建父組件Father.vue渲染多個swiper組件、模擬異步數據變化

<template>
  <div class="father">
    <!--傳遞不同的currentIndex 作為區分不同swiper組件的動態id-->
    <CarouselContainer :slide-list="list" currentIndex="1"></CarouselContainer>
    <CarouselContainer :slide-list="list" currentIndex="2"></CarouselContainer>
    <button @click="changeData">更換數據嘍</button>
  </div>
</template>
<script>
import CarouselContainer from './components/CarouselContainer.vue'
export default {
  components: {
    CarouselContainer,
  },
  data(){
    return{
      list:['a','b','c']
    }
  },
  methods: {
    changeData(){
    	const swiperList = ['我是圖片1','我是圖片2','我是圖片3'];
    	this.list = swiperList ;
    }
  }
}
</script>
<style scoped>
</style>

完成之后就可以在你的項目中看到效果啦，之后可以根據項目需求去改進…

修改

此處追加說明destroy()釋放swiper實例的幾種情況：

解決問題：內存增長

此處destroy(bool1,bool2)

• bool1代表是否銷毀swiper實例

• bool2代表是否銷毀swiper樣式（導航器、分頁器等）

情景一：如果只更新swiper里面的數據，destroy(true,false)

情景二：如果要銷毀（跳轉路由銷毀組件，遍歷重新new一個swiper實例）swiper實例，destroy(true,true)

讀到這里，這篇“Vue使用swiper問題怎么解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。