vue3中swiper的简单引用

最新推荐文章于 2024-05-21 09:48:42 发布

irisMoon06

最新推荐文章于 2024-05-21 09:48:42 发布

阅读量678

点赞数

分类专栏：前端笔记文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/irisMoon06/article/details/128181342

版权

前端笔记专栏收录该内容

25 篇文章 2 订阅

订阅专栏

安装swiper

npm install swiper@6.5.7 --save

swiper部分独立成子组件，新建swiperCom.vue下

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

引入样式文件

// Import style (>= Swiper 6.x)
import "swiper/swiper-bundle.css";

引用若干本地文件

export default {
    name: "swiperCom",
    data: function () {
      return {
        imgs: [
          require("../assets/img/swiper1.jpg"),
          require("../assets/img/swiper2.jpg"),
          require("../assets/img/swiper3.jpg"),
          require("../assets/img/swiper4.jpg"),
        ],
      };
    },
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
      };
    },
  };

HTML

<swiper class="swiper-container">
      <swiper-slide class="swiper-slide" v-for="(item, i) in imgs" :key="i">
        <img :src="item" alt=""/>
      </swiper-slide>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 左右箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <!-- <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> -->
      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
</swiper>

为正常显示自动滚动、循环、分页等轮播功能，引入Swiper模块并使用

// Import Swiper core and required modules
import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay,
} from "swiper";
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);

相关模块通过setup()返回使用

return {
    onSwiper,
    onSlideChange,
    modules: [Navigation, Pagination, Scrollbar, A11y],
};

template配置参数

<swiper
      class="swiper-container"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      :pagination="{ clickable: true }"
      :autoplay="{ autoplay: true }"
      loop
    >

相关样式调整

.swiper-container {
  width: 7.1rem;
  height: 3rem;
  border-radius: 0.1rem;
  --swiper-theme-color: #ff6600;
  --swiper-pagination-color: #248cc0;
  --swiper-navigation-color: #248cc0;
  --swiper-navigation-size: 20px;
}
.swiper-slide img{
  width: 100%;
}