Vue使用Swiper的案例詳解

更新時間：2022年06月22日 12:01:24 作者：Tyler Yue

這篇文章主要介紹了Vue使用Swiper的案例詳解，主要包括引入swiper,創(chuàng)建輪播圖組件CarouselContainer.vue的詳細代碼，本文給大家介紹的非常詳細，需要的朋友可以參考下

Vue使用Swiper看這一篇就夠了

此案例實現(xiàn)需求

完成swiper動態(tài)異步數(shù)據(jù)下的slide渲染
自定義分頁器樣式
解決loop:true設(shè)置時的事件丟失問題
swiper鼠標(biāo)移入/移出暫停/開始輪播
單頁面渲染多個swiper組件互不影響

1、引入swiper

npm i swiper@5.2.0

2、創(chuàng)建輪播圖組件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.name}}</div>
      </div>
      <!-- 分頁器 -->
      <div class="swiper-pagination"></div>
      <!--導(dǎo)航器-->
      <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數(shù)據(jù)發(fā)生變化時,更新swiper
    slideList:{
      deep:true,
      // eslint-disable-next-line
      handler(nv,ov){
        console.log("數(shù)據(jù)更新了")
        this.updateSwiper()
      }
    }
  },
  mounted() {
    this.initSwiper()
  },
  methods:{
    //鼠標(biāo)移入暫停自動播放
    stopAutoPlay() {
       this.currentSwiper.autoplay.stop()
    },
    //鼠標(biāo)移出開始自動播放
    startAutoPlay() {
      this.currentSwiper.autoplay.start()
    },
    //初始化swiper
    initSwiper(){
      // eslint-disable-next-line
      let vueComponent=this//獲取vue組件實例
      //一個頁面有多個swiper實例時，為了不互相影響,綁定容器用不同值或變量綁定
      this.currentSwiper = new Swiper('#'+this.currentIndex, {
        loop: true, // 循環(huán)模式選項
        autoHeight:'true',//開啟自適應(yīng)高度,容器高度由slide高度決定
        //分頁器
        pagination: {
          el: '.swiper-pagination',
          clickable:true,//分頁器按鈕可點擊
        },
        on: {
          //此處this為swiper實例
          //切換結(jié)束獲取slide真實下標(biāo)
          slideChangeTransitionEnd: function(){
            console.log(vueComponent.$props.currentIndex+"號swiper實例真實下標(biāo)",this.realIndex)
          },
          //綁定點擊事件,解決loop:true時事件丟失
          // eslint-disable-next-line
          click: function(event){
            console.log("你點擊了"+vueComponent.$props.currentIndex+"號swiper組件")
          }
        },
        //導(dǎo)航器
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        autoplay: {
          //自動播放,不同版本配置方式不同
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        slidesPerView: 1, //視口展示slide數(shù)1
        slidesPerGroup: 1, //slide數(shù)1頁一組
      })

    },
    //銷毀swiper
    destroySwiper(){
        try {
          this.currentSwiper.destroy(true,false)
        }catch (e) {
          console.log("刪除輪播")
        }
    },
    //更新swiper
    updateSwiper(){
      this.destroySwiper()
      this.$nextTick(()=>{
        this.initSwiper()
      })
    },
  },
  destroyed() {
    this.destroySwiper()
  }
}
</script>
<style scoped>
  .CarouselContainer{
    background-color: gray;
  }
  /*slide樣式*/
  .my-swiper-slide{
    height: 300px;
    background-color: pink;
  }
  /*swiper容器樣式*/
  .swiper-container {
    width: 700px;
    border: 1px solid red;
  }
  /*自定義分頁器按鈕被點擊選中時的樣式*/
  /deep/.swiper-pagination-bullet-active{
    background-color: #d5a72f !important;
    width: 20px;
  }
  /*自定義分頁器按鈕常規(guī)樣式*/
  /deep/.swiper-pagination-bullet{
    background-color: #9624bf;
    opacity: 1;
    width: 20px;
  }
</style>

3、創(chuàng)建父組件App.vue渲染多個swiper組件、模擬異步數(shù)據(jù)變化

<template>
  <div id="app">
    <!--傳遞不同的currentIndex 作為區(qū)分不同swiper組件的動態(tài)id-->
    <CarouselContainer :slide-list="list" currentIndex="1"></CarouselContainer>
    <CarouselContainer :slide-list="list" currentIndex="2"></CarouselContainer>
  </div>
</template>
<script>
import CarouselContainer from './components/CarouselContainer.vue'
export default {
  name: 'App',
  components: {
    CarouselContainer,
  },
  data(){
    return{
      list:[
        {name:"aaa"},
        {name:"bbb"},
        {name:"ccc"},
      ]
    }
  },
  mounted() {
    let self=this
    //延時模擬兩次數(shù)據(jù)變化
    setTimeout(()=>{
      let obj={name:"ddd"}
      self.list.push(obj)
    },5000)
    setTimeout(()=>{
      let obj={name:"eee"}
      self.list[0].name="AAA"
      self.list.push(obj)
    },8000)
  }
}
</script>
<style scoped>
</style>

只需要這兩個文件就可以vue項目中運行demo查看效果了

到此這篇關(guān)于Vue使用Swiper看這一篇就夠了的文章就介紹到這了,更多相關(guān)Vue使用Swiper內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: