首页 前端知识 【Vue】vue2项目使用swiper5.4.5轮播图2024年1月5日实战保姆级教程(已过时)

【Vue】vue2项目使用swiper5.4.5轮播图2024年1月5日实战保姆级教程(已过时)

2024-05-08 10:05:15 前端知识 前端哥 567 216 我要收藏

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、npm 下载swiper
  • 二、使用步骤
    • 1.引入库+声明变量
    • 2.编写页面
    • 3.执行js
  • 总结


前言

swiper轮播图官网

参考文章,最好先看完他的介绍,再看我的。
swiper,vue中swiper的应用,swiper各个版本在vue项目中应用

官方效果 传送门

更多效果 传送门


提示:以下是本篇文章正文内容,下面案例可供参考

一、npm 下载swiper

npm install swiper@5.4.5 -S

在这里插入图片描述

二、使用步骤

1.引入库+声明变量

代码如下(示例):

import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
export default {
    name: "vinit",
    components: {},
    data() {
        return {
            swiper: null,
            swiperList: [{
                id: 1,
                title: '采集国家二级保护野生植物审批',
                imgUrl: require("@/assets/image/banshi-01.png"),
            }, {
                id: 2,
                title: '农村危房改造',
                imgUrl: require("@/assets/image/banshi-02.png"),
            }, {
                id: 3,
                title: '乡村医生执业注册',
                imgUrl: require("@/assets/image/banshi-03.png"),
            }, {
                id: 4,
                title: '生鲜乳准运证明核发',
                imgUrl: require("@/assets/image/banshi-04.png"),
            }, {
                id: 5,
                title: '常量命名全部大写,单词间用下划线隔开,力求语义表达完整清楚, 不要嫌名字长',
                imgUrl: require("@/assets/image/banshi-01.png"),
            }, {
                id: 6,
                title: '使用 2 个空格进行缩进',
                imgUrl: require("@/assets/image/banshi-02.png"),
            }, {
                id: 7,
                title: '不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以 提升可读性',
                imgUrl: require("@/assets/image/banshi-03.png"),
            }, {
                id: 8,
                title: '使用字面量来代替对象构造器',
                imgUrl: require("@/assets/image/banshi-04.png"),
            }]
            ......

2.编写页面

代码如下(示例):

<div style="background-color: #fff;">
    <div class="banshi">
        <h1>办事查询</h1>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div v-for="item in swiperList" :key="item.id" class="swiper-slide"
                    :style="`background-image:url(${item.imgUrl})`">
                    <h3>{{ item.title }}</h3>
                    <el-button>立即办理</el-button>
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
</div>

样式如下

.banshi {
        width: 1200px;
        margin: 0 auto;
        padding: 70px 0;
        .swiper-slide {
            position: relative;
            height: 328px;
            width: 264px;
            padding: 36px 22px;
            background-repeat: no-repeat;
            background-size: contain;
            background-color: #F7F8FA;

            .el-button {
                z-index: 2;
            }
        }
    }

3.执行js

getSwiper() {
    this.swiper = new Swiper(".swiper-container", {
        loop: true, // 无缝
        autoplay: { //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
        },
        paginationClickable: true,
        slidesPerView: 4, // 一组三个
        spaceBetween: 30, // 间隔
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true, // 分页器可以点击
        },
    })
}

一定要在mounted里面去执行,只有页面上轮播内容循环结束了,才可以初始化swiper

mounted() {
        this.getSwiper()
    },

在这里插入图片描述

效果如下
在这里插入图片描述


总结

vue2使用swiper组件组件实战保姆级教程

2024年1月5日10:51:05补充

在大屏上写轮播图,在摁下F11或者放大窗口之后,会丢失pagination,条数会变化,加上这两行,重新渲染swiper

        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true,
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7548.html
标签
评论
发布的文章

Unity读取Json的几种方法

2024-05-12 17:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!