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://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/28/vue-js3-2-6-yong-swipper-shi-xian-lun-bo-tu-swiper-6-8-4/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，安装:

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