vue中使用swiper輪播圖的正確姿勢(親測有效)

更新時間：2022年06月07日 10:51:51 作者：尹藍銳

最近在用Vue制作移動端項目,碰到了輪播圖的制作,接下來就讓小編一步一步帶大家動作制作吧,下面這篇文章主要給大家介紹了關(guān)于vue中使用swiper輪播圖的正確姿勢,需要的朋友可以參考下

前言

網(wǎng)上搜了一大堆在vue中如何使用swiper，結(jié)果搜出來一堆垃圾，也不知道從哪里復(fù)制的，吐槽完畢。假設(shè)你是個新手，我從新建項目開始跟你講，以下是步驟。

1.新建vue項目

vue create 項目名

然后選最下面那一個（鍵盤上下鍵操作）然后回車

選擇Bable，Router，Vuex，Css-Processords四個，其他的不要選中（空格鍵是選中和取消選中）

剩下的步驟按這張圖來進行選擇，然后項目就創(chuàng)建成功了

2.裝swiper的包

先在命令行cd到項目中

cd 項目名

npm i swiper vue-awesome-swiper

npm i swiper@5

在package.json中查看裝包是否完成

3.使用swiper

1.在components文件夾中新建swiperCom.vue,把下面代碼復(fù)制進去,注釋里面有swiper的使用方法。

注意：請確保../assets/img/ 路徑下有swiper1.jpg等照片

<template>
    <div id="swipercom">
        <div class="swiper-container" id="swiperIndex">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
                    <img :src="item.pic" alt="">
                </div>
            </div>
            //換頁器
            <div class="swiper-pagination">

            </div>
            //前進后退
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            //滾動條
            <div class="swiper-scrollbar"></div>
        </div>
    </div>
</template>

<script>
    import 'swiper/css/swiper.css'  //引入swiper樣式
    import Swiper from 'swiper';	//引入swiper
    export default {
        name: "Swiper",
        data(){
            return{
                imgs:[
                    {pic:require('../assets/img/swiper1.jpg')},
                    {pic:require('../assets/img/swiper2.jpg')},
                    {pic:require('../assets/img/swiper3.png')}
                ]
            }
        },
        mounted() {
            var mySwiper=new Swiper('#swiperIndex',{
                //配置分頁器內(nèi)容

                loop: true, // 循環(huán)模式選項
                pagination:{
                    el:".swiper-pagination",//換頁器與哪個標(biāo)簽關(guān)聯(lián)
                    clickable:true//分頁器是否可以點擊
                },
                // 如果需要前進后退按鈕
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                //如果需要滾動條
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
            })
        }
    }
</script>

<style lang="less">
    #swipercom{
        width: 7.5rem;
        #swiperIndex.swiper-container{
            width: 7.1rem;
            height: 2.6rem;
            border-radius: 0.1rem;

            .swiper-slide img{
                width: 100%;
            }
            .swiper-pagination-bullet-active{
                background-color: orangered;
            }
        }
    }
</style>

2.然后在項目中找到HomeView.vue（默認為主頁面），把下面代碼復(fù)制，替換掉里面內(nèi)容，里面引入了swiperCom子組件，這也是我們需要用到swiper的子組件

<template>
  <div class="home">
<!--    輪播圖-->
    <swiperCom></swiperCom>
  </div>
</template>

<script>
import SwiperCom from "@/components/swiperCom";
export default {
  name: 'HomeView',
  components: {
 	SwiperCom
  }
}
</script>

<style scoped>
</style>

大功告成，效果如下