Vue2 中利用Swiper构建中心大双方小轮播效果

开发者 · 2024-10-6 20:44:58

Swiper是一个功能丰富的“滑动殊效”插件：
常用的tab切换，banner切换等等，包罗各种切换殊效，看Demo就非常炫酷。同时，也提供了主流的框架组件版本。然而，最新版的Vue组件只支持在Vue3中利用。查找资料后实践，记载一个Vue2中的利用方式。
Swiper的官网介绍也比力清晰，英文官网中是最新的版本的内容，没有找到旧版的文档内容，中文官网可以看到旧版的文档。
一、Swiper 在Vue2 中的利用方法

最新的Swiper只支持Vue3，以是在 Vue2上要安装旧版本
第一步：npm 安装准确的版本

npm i swiper@6.8.4 vue-awesome-swiper@4.1.1
第二步：在对应的Vue页面中引用库

这里实在是利用vue-awesome-swiper库对swiper的封装
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'import 'swiper/css/swiper.css'// 添加组件components: { Swiper, SwiperSlide,},第三步：在页面上利用组件，并对组件添加设置，swiperOption属性设置见后文

<swiper

ptions="swiperOption"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> <swiper-slide>Slide 4</swiper-slide> <swiper-slide>Slide 5</swiper-slide> <swiper-slide>Slide 6</swiper-slide> <swiper-slide>Slide 7</swiper-slide></swiper>二、Swiper 相干参数和变乱(options的设置)

相干参数和变乱参考中文网站中旧版api。该文档是Swiper 4.X - 7.X 的api ，但是这里是swiper@6.8.4版本，大部门api是通用的，7上只是略有区别，看文档时留意区分即可。
留意：

该组件变乱的监听有一些坑，通过监听点击某个slider变乱举行阐明。
监听变乱可以直接写在组件的标签中，如<swiper

ptions="swiperOption" @tap="test">, 如许在test方法中就可以收到点击回调。然而，当我们想获取点击某个slide时，却发现在该方法中无法获取到swiper对象，进而无法利用swiper对象的activeIndex属性获取到当前点击的slide位置。
若要想获取该swiper实例，则必要将监听设置到on参数中：
swiperOption: { on: { // 该方法中的this都指代swiper本身 tap: function () { console.log('点击的位置', this.activeIndex); } }}留意这里也不能写成箭头函数，会更改this的指向。
三、简朴的例子：中心大双方小的轮播

效果如图：

可设置loop属性让初始加载即双方都有slide，详见下方代码loop属性解释
完备代码如下，紧张是设置相干的样式，详细参数寄义解释在代码中了：
<template> <div> <div怎样准确的利用 vue-awesome-swiper 轮播组件
swiper中心大双方小的轮播图
swiper写中心大双方小的轮播图
利用swiper做的轮播图--多种效果
Vue中利用Swiper
vue 利用swiper的时间报 [Vue warn]: Failed to mount component: template or render function not d</p>

Vue2 中利用Swiper构建中心大双方小轮播效果

浏览过的版块

所属分类: 问答交流

新帖推荐: 30日

推荐作品