吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 3495|回复: 5
收起左侧

[其他转载] VUE 3.0 使用 swiper 轮播图插件

 关闭 [复制链接]
被遗忘的路人 发表于 2021-2-7 12:13
本帖最后由 被遗忘的路人 于 2021-2-7 12:14 编辑

不喜勿喷, 大佬绕道

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


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

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



贴上成品
[HTML] 纯文本查看 复制代码
<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
感谢楼主分享 正在踩坑
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-15 04:04

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表