问题:在事件回调中,我们需要获取vue页面data中的数据,而此时的this指向当前swiper对象,并不指向vue对象;
解决办法:
1.安装swiper,执行 npm install vue-awesome-swiper --save 命令
npm install vue-awesome-swiper --save
//cnpm install vue-awesome-swiper --save
2.在main.js中添加
import 'swiper/dist/css/swiper.css' //这个样式我并没有找到,但百度都是这样,后面有我的引入方法;
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
3.当前页面组件声明
components: {
swiper,
swiperSlide,
},
.vue
<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>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
js:
data() {
return {
swiperOption: {
notNextTick: true,
autoplay: 3000,
direction: 'horizontal',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
paginationClickable: true,
mousewheelControl: true