关于swiper插件在vue2的使用
最近做项目用到了vue-awesome-swiper,总结一下使用方法
第一步:安装依赖
npm install swiper vue-awesome-swiper --save
or npm install swiper [email protected] --save
第二步:引入组件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
components: {
swiper,
swiperSlide,
},
第三步:创建容器:
第四步:创建配置对象
swiperOption: {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 0,
stretch: -80, // slide左右距离
depth: 400, // slide前后距离
modifier: 0.5, //
slideShadows: false, // 滑块遮罩层
},
loop: true,
on: {
click: function () {
// 监听点击滑块事件// this.realIndex是当前swpier 实例的对象属性
// console.log(this.realIndex); // 当前滑块索引
},
slideChange: function () {
console.log(this.realIndex);
},
}, //on配置对象用来绑定swipet事件的回调
},
这里主要swiper的一些监听事件可以在on配置对象中绑定,此时的this是swiper本身
也可以通过下图的方式绑定:
这种方式绑定如果想获取到swiper对象,需要通过绑定ref然后通过:
this.$refs.myswiper.swiper来获取
注意:this.$refs.myswiper.swiper.realIndex就是当前被激活滑块的索引值。可以通过this.slides[realIndex]来获取当前滑块的内容
- 你有对象类,我有结构体,Go lang1.18入门精炼教程,由白丁入鸿儒,go lang结构体(struct)的使用EP06
- 设计模式之组合模式
- 43%非常看好TypeScript…解读“2022前端开发者现状报告”
- 学长告诉我,大厂MySQL都是通过SSH连接的
- 运筹帷幄决胜千里,Python3.10原生协程asyncio工业级真实协程异步消费任务调度实践
- 聊聊Spring事务控制策略以及@Transactional失效问题避坑
- [开源项目]可观测、易使用的SpringBoot线程池
- 看到这个应用上下线方式,不禁感叹:优雅,太优雅了!
- 【Java面试】怎么防止缓存击穿的问题?
- 面试突击72:输入URL之后会执行什么流程?
- MySQL源码解析之执行计划
- Docker镜像管理基础
- OpenCV4之C 入门详解
- k8s暴露集群内和集群外服务的方法
- React报错之react component changing uncontrolled input
- 使用jmh框架进行benchmark测试
- Python-基础学习-第二轮
- 如果Controller里有私有的方法,能成功访问吗?
- Chapter 02 - Let's Get Started(C#篇)
- 【springcloud】环境搭建与Rest使快速上手