vue2項目之swiper.js 的使用

更新時間：2023年12月10日 08:47:32 投稿：wdc

這篇文章主要介紹了vue2項目之swiper.js 的使用,需要的朋友可以參考下

swiper.js 的使用

官網(wǎng) API（部署在 swiper 實例中）：https://www.swiper.com.cn/api/index.html

官網(wǎng)輪播圖（查看源代碼）：https://www.swiper.com.cn/demo/index.html

接下來介紹怎么在 vue2 里使用 swiper.js （vue2 使用 swiper5版本）

1、安裝、引入css

npm i swiper@5

// main.js

// 引入 swiper.css
import "swiper/css/swiper.css";

2、在組件中使用：引入 js 引入 html 結(jié)構(gòu)

import Swiper from 'swiper'

html 結(jié)構(gòu)：

1、開始先放個圖片占個位置確定布局，再把圖片換成下面的結(jié)構(gòu)

2、注意最外層的 class="swiper-container" 必須！且后面的 swiper 實例也要改！

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(img,index) in bannerList" :key="index">
            <img :src="img.imgUrl" />
        </div>
    </div>

    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>

3、最后關鍵是創(chuàng)建 swiper 實例！有兩種方式

方式一：

如果圖片已經(jīng)固定（或圖片url數(shù)組已經(jīng)確定）那么直接在 mounted 函數(shù)中創(chuàng)建

mounted() {
    // 下面是普通swiper模板
    new Swiper(".swiper-container", {
        loop: true,
        mousewheel: true,
        keyboard: true,

        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },

        pagination: {
            el: ".swiper-pagination",
        },                    
    });
}

方式二：

用到 v-for 遍歷圖片url數(shù)組（并且該數(shù)組是在本組件中通過發(fā)請求獲取的），那么就要用到 watch + $nextTick

5.11.1 watch+$nextTick

當一個數(shù)據(jù)發(fā)生改變時，此時 DOM 還沒有更新，所以在監(jiān)視屬性中的 handle 函數(shù)中寫一個 $nextTick 可以實現(xiàn) 數(shù)據(jù)發(fā)生改變且 DOM 更新后執(zhí)行代碼

回到 swiper ，我們在這個時候創(chuàng)建 swiper 實例

bannerList：圖片url數(shù)組

watch: {
    bannerList: {
        handler() {
            this.$nextTick(function() {
                new Swiper(".swiper-container", {
                    loop: true,
                    mousewheel: true,
                    keyboard: true,

                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },

                    pagination: {
                        el: ".swiper-pagination",
                    },                    
                });
            })
        }
    }
},

5.11.2 修改分頁器樣式

1、添加屬性

pagination: {
    el: ".swiper-pagination",
    clickable: true,
    bulletClass : 'my-bullet', // 這個
    bulletActiveClass: 'my-bullet-active',
},

2、在組件里面寫 css （不要加 scope）

// 分頁器樣式
.my-bullet{
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: black;
    opacity: 0.5;
    margin: 0 4px;
}

// 選中的分頁器樣式（會繼承上面那個樣式）
.my-bullet-active {
    background: #ff6600;
    opacity: 1;
}

5.11.3 封裝輪播圖組件

當一個圖片需要變?yōu)檩啿D時，我們把 img 標簽換成 Carousel 組件即可！

1、Carousel 組件需要一個參數(shù)：圖片 url 數(shù)組

imgList = [
    {imgUrl: '...'}
    {imgUrl: '...'}
]

2、將 Carousel 組件注冊為全局組件

// 在 components 中新建 Carousel 文件夾

// main.js
import Carousel from '@/components/Carousel'
Vue.component(Carousel.name,Carousel)

3、Carousel/index.vue （直接照搬即可樣式可自行修改）

<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(img,index) in imgList" :key="index">
                <img :src="img.imgUrl" />
            </div>
        </div>

        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
    </div>
</template>

<script>
    import Swiper from 'swiper'

    export default {
        name: 'Carousel',

        props: ['imgList'],

        watch: {
            imgList: {
                immediate: true,
                handler() {
                    this.$nextTick(function() {
                        new Swiper(".swiper-container", {
                            loop: true,

                            pagination: {
                                el: ".swiper-pagination",
                                clickable: true,
                                bulletClass : 'my-bullet',
                                bulletActiveClass: 'my-bullet-active',

                            },
                            
                            navigation: {
                                nextEl: ".swiper-button-next",
                                prevEl: ".swiper-button-prev",
                            },
                        });
                    })
                }
            }
        }
    }
</script>

<style lang="less">
    // 分頁器樣式
    .my-bullet{
        position: relative;
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background: black;
        opacity: 0.5;
        margin: 0 4px;
    }

    // 選中的分頁器樣式（會繼承上面那個樣式）
    .my-bullet-active {
        background: #ff6600;
        opacity: 1;
    }
</style>

4、組件中使用（傳入圖片 url 數(shù)組即可）