如何修改画廊组件中代码，使得显示时从第一张开始

慕前端2185815 2021-06-18

源自：项目-详情页面开发 2-4 列表及详情页面迁移

收起

2回答

好帮手慕慕子 2021-06-18 17:36:32

同学你好，可以将控制画廊组件的v-show指向改成v-if，通过删除和添加dom元素的方式，让其显示的时候重新创建swiper相关元素，就可以默认从第一张开始显示，达到同学想要的效果，如下：

如下：

祝学习愉快~

收起回答

提问者慕前端2185815 #1

我的banner组件代码改为v-if后，为什么还是没有从第一张图片开始呢？
<template>
<div>
<div class="banner" @click="handleBannerClick">
<img class="banner-img" :src="bannerImg" >
<div class="banner-info">
<div class="banner-title">
{{this.sightName}}
</div>
<div class="banner-number">
<span class="iconfont banner-icon"></span>
{{this.bannerImgs.length}}
</div>

</div>
</div>
<fade-animation>
<common-gallery
:imgs="bannerImgs"
v-if="showGallery"
@close="handleGalleryClose"
></common-gallery>
</fade-animation>
</div>
</template>

<script>
import CommonGallery from "common/gallery/Gallery"
import FadeAnimation from 'common/fade/FadeAnimation'
export default {
name:'DetailBanner',
props:{
sightName:String,
bannerImg:String,
bannerImgs:Array

},
data(){
return {
showGallery:false
}
},
components:{
CommonGallery,
FadeAnimation
},
methods:{
handleBannerClick(){
this.showGallery = true
},
handleGalleryClose(){
this.showGallery = false
}
}
}
</script>

<style scoped>
.banner
position:relative
overflow:hidden
height:0
padding-bottom:55%
.banner-img
width:100%
.banner-info
display:flex
position:absolute
bottom:0
left:0
right:0
line-height:.6rem
color:#fff
background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
.banner-title
flex:1
font-size:.32rem
padding:0 .2rem
.banner-number
height:.32rem
line-height:.32rem
margin-top:.14rem
padding:0 .4rem
border-radius:.2rem
background:rgba(0,0,0,.8)
font-size:.24rem
.banner-icon
font-size:.24rem

</style>

2021-06-18 18:26:19
好帮手慕慕子回复提问者慕前端2185815 #2

同学你好，老师在源码中测试同学粘贴的这部分代码，将v-show改成v-if之后，是可以实现同学想要的效果的，如下：
建议同学清除浏览器缓存，重启项目后再测试下，祝学习愉快~

2021-06-18 19:01:45
提问者慕前端2185815 回复好帮手慕慕子 #3

如何清理浏览器缓存，使得显示第一页

2021-06-18 19:19:02

点开查看后面1条评论

好帮手慕慕子 2021-06-18 14:31:11

同学你好，老师测试源码，默认是从第一张开始显示的，建议同学检查下自己书写的代码中，swiperOptions中是否设置了initialSlide属性，如果设置了，可以将该属性值调整0，就可以默认从第一张开始展示，如下：

如果还有问题，可以将你写的相关代码全部粘贴过来，老师测试下，便于帮助同学准确的定位与解决问题。

祝学习愉快~

收起回答

提问者慕前端2185815 #1

当点击详情页面的banner，画廊组件显示出来时，此时浏览第二页，在点击一下退出显示。当再次点击时，画廊组件显示的还是第二页，现在想要让画廊组件再次显示时从第一页开始，如何修改代码呢？
这是我的画廊组件的代码：
<template>
<div class="container" @click="handleGalleryClick">
<div class="wrapper">
<swiper :options="swiperOption" >
<swiper-slide
v-for="(item,index) of imgs"
:key="index"
>
<img class="gallery-img" :src="item" />
</swiper-slide>

<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</template>

<script>
export default {
name:'CommonGallery',
props:{
imgs:{
type:Array,
default(){
return []
}
}
},
data(){
return {
swiperOption:{
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

height:0
width:100%
padding-bottom:100%
background:#fff
.gallery-img
width:100%
.swiper-pagination
color:#fff
bottom:-1rem
</style>

2021-06-18 16:32:29