vue3中使用swiper7

• 安装swiper,指定的版本7

npm i swiper@7

安装成功之后，package.json的文件可以看到版本

微信截图_20220726143725.png

• 在使用swiper的页面引入以下

import { Swiper, SwiperSlide } from "swiper/vue"; // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import { Autoplay, Navigation, Pagination, A11y } from "swiper";
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
const modules = [Autoplay, Pagination, Navigation, A11y];

template中

 <swiper
    :slidesPerView="1"
    :spaceBetween="30"
    :loop="true"
    :centeredSlides="true"
    :pagination="{
      clickable: true,
    }"
    :autoplay="{
      delay: 2500,
      disableOnInteraction: false,
    }"
    :navigation="true"
    :modules="modules"
    class="mySwiper"
  >
    <swiper-slide v-for="(item, index) in data.imgList" :key="index">
      <div style="width: 100%" class="flex">
        <img
          style="width: 100%; height: 100%"
          :src="proxy.$imgApi + item.image_path"
        />
      </div>
    </swiper-slide>
  </swiper>

参数说明

 :slidesPerView="1" //每页显示几个
:spaceBetween="30" //每个间距是多少
:loop="true" //循环滚动
:centeredSlides="true" // //值为【false】时左对齐，默认就是左对齐，值为【true】时居中对齐
:pagination="{
      clickable: true,
    }"//点击分页圆点是否切换
:autoplay="{
      delay: 2500,
      disableOnInteraction: false,
    }"////设置多少毫秒会执行一次动画（可以理解为：翻页 / 切换
:navigation="true" //左右切换箭头

完整代码

<template>
  <swiper
    :slidesPerView="1"
    :spaceBetween="30"
    :loop="true"
    :centeredSlides="true"
    :pagination="{
      clickable: true,
    }"
    :autoplay="{
      delay: 2500,
      disableOnInteraction: false,
    }"
    :navigation="true"
    :modules="modules"
    class="mySwiper"
  >
    <swiper-slide v-for="(item, index) in data.imgList" :key="index">
      <div style="width: 100%" class="flex">
        <img
          style="width: 100%; height: 100%"
          :src="proxy.$imgApi + item.image_path"
        />
      </div>
    </swiper-slide>
  </swiper>
</template>
<script setup>
import { ref, reactive, onActivated, onMounted, getCurrentInstance } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue"; // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import { Autoplay, Navigation, Pagination, A11y } from "swiper";
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
const modules = [Autoplay, Pagination, Navigation, A11y];

const { proxy } = getCurrentInstance();
console.log("url", proxy.$imgApi);

// 描述字段
let data = reactive({
  imgList: [],
});
</script>
<style lang="less" scoped>
.img {
  width: 400px;
  height: 400px;

  img {
    width: 100%;
    height: 100%;
  }
}
.mySwiper {
  width: 100%;
  margin-top: 70px;
  background: #f7f7f7;
  height: 200px;
}
</style>

文章参考