因为这个画廊可能在多处使用,所以这里建立了一个common的文件夹。
布局如下:
代码注意点如下:
代码如下:
<div class="container">
<div class="wrapper">
<swiper :options="swiperOptions">
<swiper-slide>
<img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1803/68/685088cd549837b7a3.img.jpg_r_800x800_c4393de9.jpg">
</swiper-slide>
<swiper-slide>
<img class="gallary-img" src="http://img1.qunarzz.com/sight/p0/1803/ab/ab95a998d9dc4e5aa3.img.jpg_r_800x800_38cc39dc.jpg">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
<style lang="stylus" scoped>
.container >>> .swiper-container
overflow inherit
.container
display flex
flex-direction column
justify-content center
z-index 99
position fixed
top 0
left 0
right 0
bottom 0
background #000
.wrapper
width 100%
height 0
padding-bottom 62.5%
.gallary-img
width 100%
.swiper-pagination
color #fff
bottom -3rem
</style>
<script>
export default {
name: 'CommerGallary',
data () {
return {
swiperOptions: {
pagination: '.swiper-pagination',
paginationType: 'fraction'
}
}
}
}
</script>
最后:关闭和打开的处理:
子组件的传递和接收数据