VUE 3.0 使用 swiper 轮播图插件

被遗忘的路人 发表于 2021-2-7 12:13

本帖最后由被遗忘的路人于 2021-2-7 12:14 编辑

不喜勿喷, 大佬绕道

第一步, 先安装 swiper 插件, 命令: npm i swiper

第二步, 引入使用, 这块有很大的问题.
首先 VUE 3.0 已经不支持 Vue.use();这种写法了, 大家不要跳这个坑了.
网上百度到的全部让你这样弄, 一弄一个坑.

关于修改分页器样式的
加上深度修改 /deep/ 或者 >>>

贴上成品
<template>
<div class="swiperComponent">
   <div class="swiper-container">
         <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(items, key) in swiperList" :key="key">
               <div class="swiper-BgMap" :style="{ backgroundImage: 'url('+ items.bgMap +')' }"></div>
            </div>
         </div>
         <div class="swiper-pagination" slot="pagination"></div>
   </div>
</div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper.less';

import SwiperCore, { Pagination, Autoplay} from 'swiper';
SwiperCore.use([ Pagination, Autoplay]);

export default {
   name: "swiperComponent",
   components: {
         Swiper,
         SwiperSlide,
   },
   data() {
         return {
            swiperList: [
               {
                     id: 0,
                     bgMap: require("@assets/banner/banner_01.png"),
                     annotate: "背景图第一张"
               }, {
                     id: 1,
                     bgMap: require("@assets/banner/banner_01.png"),
                     annotate: "背景图第二张"
               }, {
                     id: 2,
                     bgMap: require("@assets/banner/banner_01.png"),
                     annotate: "背景图第三张"
               }
            ]
         }
   },
   mounted() {
         this.$nextTick(() => {
            new SwiperCore(".swiper-container", {
               loop: true,
               autoplay: {
                     delay: 1000000,
                     disableOnInteraction: false
               },
               pagination: {
                     el: ".swiper-pagination",
                     clickable: true
               }
            });
         });
   }
}
</script>

<style scoped>
.swiperComponent {
   position: relative;
}

.swiperComponent, .swiper-container, .swiper-slide, .swiper-BgMap {
   width: 100%;
   height: 100%;
}

.swiper-BgMap {
   max-width: 1920px;
   margin: 0 auto;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

.swiper-pagination {
   position: absolute;
   z-index: 999999;
   left: 0;
   right: 0;
   bottom: 25px;
   margin: auto;
   height: 15px;
   width: 285px;
   display: flex;
   overflow: hidden;
}

.swiper-container >>> .swiper-pagination-bullet {
   width: 30px;
   height: 13px;
   cursor: pointer;
   border-radius: 10px;
   overflow: hidden;
   margin-right: 15px;
   border: 1px solid #FFFFFF;
}

.swiper-container >>> .swiper-pagination-bullet:last-of-type {
   margin-right: 0 !important;
}

.swiper-container >>> .swiper-pagination-bullet-active {
   width: 90px;
   background-color: #FFFFFF;
}
</style>

hellostranger 发表于 2021-2-7 14:30

你这写法还是vue2.x的options写法

tt0202 发表于 2021-2-7 15:47

感谢分享支持

被遗忘的路人 发表于 2021-2-7 20:40

hellostranger 发表于 2021-2-7 14:30
你这写法还是vue2.x的options写法

主要是避免swiper插件 Vue.use()那个坑

止于终止@ 发表于 2022-8-27 14:03

感谢楼主分享正在踩坑

页: [1]

吾爱破解 - 52pojie.cn's Archiver

VUE 3.0 使用 swiper 轮播图插件