vue.js3.2.6: 用swipper實現輪播圖（swiper@6.8.4）

一，swipper的地址

官網：

https://swiperjs.com/

swipper代碼的地址:

https://github.com/nolimits4web/swiper

在npm的地址:

https://www.npmjs.com/package/swiper

文檔地址：

https://swiperjs.com/vue#installation

說明：劉宏締的架構森林是一個專注架構的博客，地址：https://www.cnblogs.com/architectforest

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

說明：作者:劉宏締 郵箱: [e-mail]

 

二，安裝:

1,安裝less

liuhongdi@lhdpc:/data/vue/storeweb$ npm install less less-loader@7.0.0 --save
 
added 12 packages in 6s

說明：此處指定版本，否則會報沖突無法安裝

 

2,安裝swiper

liuhongdi@lhdpc:/data/vue/storeweb$ npm install swiper@6.8.4 --save
 
added 3 packages in 7s

說明：當前最新的版本為7.x,因為發布時間較短，我們選擇更穩定的6.x

三，編寫代碼:

Home.vue

<template>
  <div style="width:100%;height:100%;background: #00ff00;" ref="topdiv">
  <div>首頁</div>
  <div  >{{msg}}</div>
    <div>當前域:{{domain}}</div>
    <swiper  :autoplay="swiper_options.autoplay" :loop="swiper_options.loop" :speed="swiper_options.speed" :pagination="{ clickable: true }" :style="{height:swiperHeight+'px'}">
      <swiper-slide><img src="@/assets/a.jpg" alt="" style="width:100%;height:100%;"></swiper-slide>
      <swiper-slide><img src="@/assets/b.jpg" alt="" style="width:100%;height:100%;"></swiper-slide>
      <swiper-slide><img src="@/assets/c.jpg" alt="" style="width:100%;height:100%;"></swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { ref,reactive,onMounted} from "vue";
import {apiHome} from "../../api/api";

//引入swiper
import SwiperCore, { Autoplay, Pagination, EffectCoverflow,Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.less";
import "swiper/components/navigation/navigation.less";
//設置swiper
SwiperCore.use([Autoplay, Pagination, EffectCoverflow,Navigation]);

export default {
  name: "Home",
    components: {
      Swiper,
      SwiperSlide,
    },
  setup() {
    //保存用戶數據的變量
    const msg = ref("");
    const domain = ref("");
    const loading = ref(true);
    //從接口獲取用戶信息
    const info = async () => {
      apiHome({
      }).then(res => {
        if (res.code == 0) {
          msg.value = res.data.msg;
          domain.value =  res.data.domain;
        }
      }).catch((error) => {
        console.log(error)
      })
    };
    info();

    //指定swiper的設置
    let swiper_options = reactive({
      autoplay:{
        delay:2000,
        disableOnInteraction: false
      },
      loop:true,
      speed:1000,
      pagination:{
        clickable: true
      }
    })

    const topdiv=ref(null);
    //指定swiper的高度，設置為寬度的62%
    const swiperHeight = ref(0);
    onMounted(() => {
      let width = topdiv.value.getBoundingClientRect().width;
      swiperHeight.value = width * 0.62;
    });
    
    return {
      info,
      msg,
      domain,
      loading,
      swiper_options,
      topdiv,
      swiperHeight,
    };
  }


}
</script>

<style>
/*分頁用的圓點*/
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  opacity: 0.6;

}
/*分頁用的圓點激活時*/
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}
</style>

 

四，測試效果

 

五，查看swipper版本:

liuhongdi@lhdpc:/data/vue/storeweb$ npm list swiper
storeweb@0.1.0 /data/vue/storeweb
└── swiper@6.8.4

查看vue.js的版本：

liuhongdi@lhdpc:/data/vue/storeweb$ npm list vue
storeweb@0.1.0 /data/vue/storeweb
├─┬ @vue/cli-plugin-babel@4.5.13
│ └─┬ @vue/babel-preset-app@4.5.13
│   └── vue@3.2.6 deduped
├─┬ element-plus@1.1.0-beta.7
│ └── vue@3.2.6 deduped
├─┬ vue-router@4.0.11
│ └── vue@3.2.6 deduped
└── vue@3.2.6