vue项目使用vue-awesome-swiper及填坑

1、下载插件

npm install --save vue-awesome-swiper

2、引入

1.全局引入

在 main.js 里引入（全局）:
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'

2.局部引入

<script>
import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
	component: {
		Swiper,
    	SwiperSlide
	}
}
</script>

3、配置

参考swiper官网：https://www.swiper.com.cn/api/index.html

1.template

<swiper class="bannerSwiper" :options="swiperOption">
	<swiper-slide class="swiper-slide" v-for="item in bannerList" :key="item.id">
		<img :src="item.imgUrl" alt="" />
	</swiper-slide>
	<div class="swiper-pagination" slot="pagination"></div>
</swiper>

2.script

data: {
	that: this,
	bannerList:[{id:"0001",imgUrl:"http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg"},{id:"0002",imgUrl:"http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg"}],
	swiperOption: { // 所有的参数同 swiper 官方 api 参数一样
		loop: true, // 循环模式选项
		autoplay: { // 是否自动播放
			delay: 3000,
			stopOnLastSlide:false,
			disableOnInteraction: false
		},
		centeredSlides: true, // 设定为true时，active-slide会居中，而不是默认状态下的居左
		slidesPerView: 1, // 设置slider容器能够同时显示的slides数量(可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量)
		spaceBetween: 0, // 在slide之间设置距离
		initialSlide: 0, // 设定初始化时slide的索引
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
		pagination: { // 配置分页器
			el: '.swiper-pagination',
			type: 'bullets' // 默认：小圆点
		},
		on: {
			init: function () {
				that.bannerList.push(this)
			}
		}
	}
}

4、出现的BUG

1.swiper轮播第二遍时，第一张图片无法点击（即：@click不生效）

// swiper-slide添加自定义属性:data-slide="JSON.stringify(item)"
// 点击事件使用配置
on: {
	click: function () {
		let item = JSON.parse(this.clickedSlide.getAttribute('data-slide'))
		
	}
}

2.跳转页面有缓存，返回上一页再次点击导致穿透

// click事件添加300毫秒的延时再执行（即：移动端点击事件有300毫秒延时）
setTimeout(() => {
 	console.log(item)
}, 300)

3.在IOS上偶现闪屏问题

/* 解决方法：
给外部元素的父标css套一个：transform:translate3d(0,0,0);overflow:hidden;

闪动元素/子元素：transform:translate3d(0,0,0) */
.swiper-container {
	transform: translate3d(0,0,0);
	overflow: hidden;
}
.swiper-slide {
	transform: translate3d(0,0,0);
}