在vue中使用swiper时左右点击按钮失效求救

Z时代
2024-01-10
分类：技术分享

element-ui 项目 npm install vue-awesome-swiper --save 安装

鼠标拖动可以，点击向左向右都无效

index.vue

<template>
<el-container class="xl-container" direction="vertical">
<div class="actor-box">
<h3>国内明星</h3>
<swiper :auto-update="true" class="actor-list"  :options="swiperOption">
<swiper-slide class="channel" v-for="(vo,key) in list" :key="key">
<div class="channel-info">
<el-image :src="https://segmentfault.com/q/1010000023107080/vo.actor_pic" class="actor-img">
<div slot="placeholder" class="image-slot"> 加载中<span class="dot">...</span> </div>
</el-image>
<p class="actor-name">{{vo.actor_name}}</p>
<p class="actor-hits">人气：{{vo.actor_hits}}</p>
</div>
<div class="channel-bottom">
<el-button class="but" size="mini" type="success">收藏</el-button>
</div>
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
<el-divider></el-divider>
</div>
</el-container>
</template>
<script>
export default {
name: 'index',
data()
{
return {
post:{'type':'all','order':'desc','num':12,'by':'time'},
list:[],
swiperOption: {
observer:true,
slidesPerView : 'auto',
centeredSlidesBounds: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
}
　　　　　
}
},
mounted()
{
let _this = this;
_this.rq.post('/api/api.php/App_Actor',_this.post).then(res=>{
_this.list = res.list
})
},
computed: {
},
methods: {
},
watch: {
}
}
</script>
<style  scoped></style>