vue-awesome-swiper API以及其回调函数 on的使用方法

原文地址: https://segmentfault.com/a/1190000014609379

复制过来版面窜了, 就分享地址, 大家自行去看吧

关于 vue-awesome-swiper 回调函数 on 的问题(基于swiper4)
在最新的swiper中，swiper绑定的事件中，是通过this指向当前swiper对象的。而在事件回调中，我们需要获取vue页面data中的数据。但是此时的this并不指向vue对象。

HTML:

<swiper :options="swiperOption" ref="mySwiper">
    <swiper-slide v-if="imgList.length>0" v-for="(item,index) in imgList" :key='index'>
            <img :src="item.imgurl">
	</swiper-slide>
</swiper>

JS

data() {
	return {
		swiperOption: {
			notNextTick: true,
			autoplay: 3000,
			direction: 'horizontal',
			grabCursor: true,
			setWrapperSize: true,
			autoHeight: true,
			paginationClickable: true,
			mousewheelControl: true,
			observeParents: true,
			loop: true,
			on:{          
				// 使用es6的箭头函数，使this指向vue对象          
				click: ()=>{            
				// 通过$refs获取对应的swiper对象            
					let swiper = this.$refs.mySwiper.swiper;            
					let i = swiper.activeIndex;            
					let flag = this.imgList[i];            
					location.href = flag.url;          
				}        
			}    
		}
	}

---

本文来自 車句 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/weixin_39015132/article/details/81560571?utm_source=copy