ToB企服应用市场:ToB评测及商务社交产业平台

标题: 关于swiper插件在vue2的使用 [打印本页]

作者: 魏晓东 时间: 2022-8-10 12:03
标题: 关于swiper插件在vue2的使用
最近做项目用到了vue-awesome-swiper，总结一下使用方法
第一步：安装依赖
npm install swiper vue-awesome-swiper --save
or npm install swiper vue-awesome-swiper@2.6.7 --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]来获取当前滑块的内容
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)