如何解决奇怪的行为 vue swiper 滑块
然后,当我打开 Block2 时,滑块显示不正确。显示一张大图。
但是当我打开模态时,滑块显示正确,关闭后也正确显示。
我使用 vuetify 和 pug:
布局
v-expansion-panels(:value="[0]" multiple )
v-expansion-panel(v-for="(item,index) in displayedPosts" :key="index")
v-card
v-expansion-panel-header
v-card-title {{item.title}}
v-expansion-panel-content(v-for="(el,index) in item.checks" :key="index")
v-card-subtitle {{el.date}}
m-gallery-slider(:files="el.files")
m-gallery-slider
<template lang="pug">
v-container(fluid)
swiper(ref="mySwiper" :options="swiperOptions" v-model="slider")
swiper-slide(v-for="(item,index) in files" :key="index")
v-img(:src="item.download_url" @click="slider = index,dialog = true")
p {{item.indicator}}
p {{item.comment}}
v-dialog(v-model="dialog")
v-img(:src="files[slider].download_url")
</template>
<script>
export default {
name: "m-gallery-layout",data() {
return {
slider: 0,dialog: false,swiperOptions: {
slidesPerView: 4,spaceBetween: 20,centeredSlidesBounds: true,grabCursor: true,breakpoints: {
1600: {
slidesPerView: 7,spaceBetween: 20
},1024: {
slidesPerView: 4,spaceBetween: 40
},768: {
slidesPerView: 3,spaceBetween: 30
},640: {
slidesPerView: 2,320: {
slidesPerView: 1,spaceBetween: 10
}
}
}
}
},props: {
files: Array
}
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},mounted() {
this.swiper.slideTo(0,1000,false)
},</script>
我做错了什么?
"swiper": "^5.4.5","vue-awesome-swiper": "^4.1.1",
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。