vue项目中引用swiper按钮点击失效问题
首先vue项目引入swiper组件需要先下载依赖npm install vue-awesome-swiper --save然后引入,import { Swiper, SwiperSlide } from 'vue-awesome-swiper'先上一段代码,<template><div class="swiper-c"><swiper :auto-update="tr
·
首先vue项目引入swiper组件需要先下载依赖
npm install vue-awesome-swiper --save
然后引入,
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
先上一段代码,
<template>
<div class="swiper-c">
<swiper :auto-update="true" class="actor-list" ref="mySwiper" :options="swiperOption">
<swiper-slide class="swiper-slide" v-for="(item,index) in list" :key="index">
<div class="buttom-time">2019-7-31</div>
</swiper-slide>
</swiper>
<div class="swiper-button-next iconfont icon-widget-shuangjiantouyou" @click="prev"></div>
<div class="swiper-button-prev iconfont icon-widget-shuangjiantouzuo" @click="next"></div>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
data () {
return {
swiperOption: {
slidesPerView: 6,
spaceBetween: 10,
slidesPerGroup: 6,
loop: true,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
components: {
Swiper,
SwiperSlide
},
watch: {},
mounted () {
},
computed: {},
methods: {
prev () {
this.$refs.mySwiper.$swiper.slidePrev()
},
next () {
this.$refs.mySwiper.$swiper.slideNext()
}
}
}
</script>
<style scoped lang="scss">
@import "../../assets/css/swiper-bundle.min.css";
</style>
点击事件失效的解决办法是给按钮绑定事件去调用swiper中的方法,这样事件就可以正常使用了
更多推荐
已为社区贡献2条内容
所有评论(0)