画廊手动滑动轮播图片出问题，一定要刷新页面重新进去才可以手动滑动轮播图
来源：9-2 Vue项目详情页 - 公用图片画廊组件拆分
大白前端
2021-04-07
2回答
-
大白前端
提问者
2021-04-08
<template>
<div class="container" @click="handleGalleryClick">
<div class="wrapper">
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide v-for="(item,index) in imgs" :key="index">
<img class="gallary-img" :src="item" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</template>
<script>
export default {
name: 'CommonGallary',
props: {
imgs: {
type: Array,
default () {
return []
}
}
},
data () {
return {
swiperOption: {
loop: true,
autoplay: false,
pagination: '.swiper-pagination',
paginationType: 'fraction',
observeParents: true,
observer: true
}
}
},
methods: {
handleGalleryClick () {
this.$emit('close')
}
}
}
</script>
<style scoped>
.container >>> .swiper-container
overflow inherit
.container
display flex
flex-direction column
justify-content center
z-index 99
position fixed
left 0
right 0
top 0
bottom 0
background #000
.wrapper
width 100%
height 0
padding-bottom 100%
.gallary-img
width 100%
.swiper-pagination
color #fff
bottom -1rem
</style>
老师，这是画廊的完整代码，我发现首页的轮播图也是不能手动轮播了，每次都要刷新才可以手动轮播
022021-04-10 -
Dell
2021-04-08
画廊完整代码贴一下我看看
00
相似问题