vue調用swiper插件步驟教程(最易理解且詳細)

更新時間：2023年04月19日 11:28:24 作者：沖擊java

有時候我們需要在vue中使用輪播組件,如果是在vue組件中引入第三方組件的話,最好通過npm安裝,從而進行統(tǒng)一安裝包管理,下面這篇文章主要給大家介紹了關于vue調用swiper插件的相關資料,需要的朋友可以參考下

我們最開始接觸的是在操作dom時候的時候引入swiper,那么這次我就用之前的文檔來教你在vue中如何調用swiper.

我們之前看的是swiper教程

那么我根據上面的教程一步一步來教你使用

1.首先創(chuàng)建好swiper組件.寫好template 里面的標簽內容(當然這里寫了個插槽為了以后方便動態(tài)插入輪播的內容),你直接復制教程里的代碼就好了

<template>
    <div class="swiper">
    <div class="swiper-wrapper">
        <slot></slot>
    </div>
    <!-- 如果需要分頁器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要導航按鈕 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滾動條 -->
    <!-- <div class="swiper-scrollbar"></div> -->
</div>
</template>
<script>

2.以vue的形式引入文件(就想之前的把swiper庫導入)

先下載swiper庫, cnpm i --save swiper

這里npm ,cnpm都是可以的.下載好庫后,就可以在我們的script中導入了

import Swiper from 'swiper/bundle';
import 'swiper/swiper-bundle.css'

3.在掛載的時候初始化swiper,掛載這是vue的生命周期,這里不知道的話需要查一查

<script>
//引入swiper文件  js css 
//
import Swiper from 'swiper/bundle';
import 'swiper/swiper-bundle.css'
export default{
    mounted(){
        //掛在后的去初始化swiper
        new Swiper ('.swiper', {
    direction: 'horizontal', // 垂直切換選項
    loop: true, // 循環(huán)模式選項
    
    // 如果需要分頁器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前進后退按鈕
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
 
    autoplay: {
    delay: 1000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    },
    
    // 如果需要滾動條
    // scrollbar: {
    //   el: '.swiper-scrollbar',
    // },
  })        
 
    }
 
}
</script>?

4.我們的swiper組件就配置好了,那么我們只要引入swiper組件進入我們的根組件下了.輪播圖就能運轉了. 我這里為了美觀些把<div class="swiper-slide"> </div>又當成組件封裝了起來.所以這個項目是一根兩件.但是你template要是直接復制教程里的話恭喜你,你的輪播就可以運轉了.后面是為了模仿真實情況,動態(tài)插入輪播圖的話就繼續(xù)看下去.

根主件

<template>
    <div>
        <film-swiper v-if="lists.length">
            
            <film-swiper-slider v-for="item in lists" :key="item" :mysrc="item">
            </film-swiper-slider>
           
 
        </film-swiper>
        <router-view></router-view>
    </div>
 
</template>
<script>
//webwa 要引入css呀
 
import filmSwiper from '../components/films/FilmSwiper.vue'
import flimeSwiperSlider from '../components/films/FilmSwiperSlider.vue'
export default {
    components:{
        filmSwiper:filmSwiper,
        filmSwiperSlider:flimeSwiperSlider
    },
    data(){
        return{
        lists:['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx1.sinaimg.cn%2Fmw690%2F4e39f084ly1h7os7gw9q6j20bn0fjq3t.jpg&refer=http%3A%2F%2Fwx1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670337717&t=c3b4e15be46c2705dc527f0b70f36d3d','https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202109%2F11%2F20210911134617_4f6a7.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670337717&t=ca4dcfb56726444c635d201ad0f88fae','https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202104%2F04%2F20210404122758_2c825.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670337717&t=d7f902f79caac3d938a2a927c6951205']
    }
}
 
}
</script>
 
<style scoped>
*{
    padding: 0;
    margin: 0;
}
</style>

第二個組件

<template>
      <div class="swiper-slide">
        <img :src="mysrc">
      </div>
</template>
<script>
 
 
export default {
    props:{
        mysrc:String,
    },
   
}
</script>
<style scoped>
img{
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}
</style>

總結

到此這篇關于vue調用swiper插件的文章就介紹到這了,更多相關vue調用swiper插件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: