标签：realIndex 插件 vue 滑块 awesome 绑定 vue2 swiper

最近做项目用到了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]来获取当前滑块的内容    

标签：realIndex,插件,vue,滑块,awesome,绑定,vue2,swiper
来源： https://www.cnblogs.com/SadicZhou/p/16410781.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。