接下来我们进行的是详情页动态路由及banner布局
先看页面的效果
下面是代码部分
<template> <div> <div class="banner"> <img src="//img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_600x330_f922b488.jpg" alt="" class="banner-img"> <div class="banner-info"> <div class="banner-title"> 故宫(AAAAA景区) </div> <div class="banner-number"> <span class="iconfont"></span> 39 </div> </div> </div> </div> </template> <script> export default { name: 'DetailBanner' } </script> <style lang="stylus" scoped> .banner overflow:hidden height:0 padding-bottom:55% position:relative .banner-img{ width:100% } .banner-info display:flex position:absolute left:0 right:0 bottom:0 line-height:0.6rem background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8)) color:#fff .banner-title flex:1 font-size:.32rem padding:0 .2rem .banner-number padding:0 .4rem height:.32rem line-height:.4rem margin-top:.24rem border-radius:.2rem background:rgba(0,0,0,.8) font-size:0.24rem .iconfont font-size:.24rem </style> 接下来我们进行画廊组件的封装
首先修改webpack.base.conf.js文件
接下来我们进行gallery组件的封装
点击我们的banner图，会进入gallery组件里面，点击gallery里面的图片，关闭gallery图片，回到banner页面
我们可以先看效果
接下来我们来看代码
记住我们是将gallery封装成了一个公共组件，放在新建的common文件夹中
//gallery.vue <template> <div> <div class="container"> <div class="wrapper" @click="handleGalleryClick"> <swiper :options="swiperOptions"> <!-- slides --> <!-- v-for="item of list" :key="item.id" --> <swiper-slide v-for="(item,index) in imgs " :key="index"> <img class="gallary-img" :src="item"> </swiper-slide> <div class="swiper-pagination" ></div> </swiper> </div> </div> </div> </template> <script> export default { name: 'commonGallary', props: { imgs: { type: Array // default () {父组件不传值的时候 // return ['http://img1.qunarzz.com/sight/p55/201211/04/fbcab3e5d6479ce893835fbb.jpg_r_800x800_6360f514.jpg', // 'http://img1.qunarzz.com/wugc/p180/201306/16/7f08e81624346b1693835fbb.jpg_r_800x800_5f03ad73.jpg' // ] // } } }, data () { return { swiperOptions: { pagination: '.swiper-pagination', paginationType: 'fraction', observeParents: true, observer: true } } }, methods: { handleGalleryClick () { this.$emit('close') } } } </script> <style lang="stylus" scoped> .container >>> .swiper-container overflow:inherit .container display:flex flex-direction:column justify-content:center overflow:hidden 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> 我们在banner中引用gallery组件
//banner <template> <div> <div class="banner" @click="handleBannerClick"> <img src="//img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_600x330_f922b488.jpg" alt="" class="banner-img"> <div class="banner-info"> <div class="banner-title"> 故宫(AAAAA景区) </div> <div class="banner-number"> <span class="iconfont"></span> 39 </div> </div> </div> <common-gallary :imgs="imgs" v-show="showGallery" @close="handlegalleryClose" ></common-gallary> </div> </template> <script> import CommonGallary from 'common/gallary/Gallary' export default { name: 'DetailBanner', data () { return { showGallery: false, imgs: [ 'http://img1.qunarzz.com/sight/p55/201211/04/fbcab3e5d6479ce893835fbb.jpg_r_800x800_6360f514.jpg', 'http://img1.qunarzz.com/wugc/p180/201306/16/7f08e81624346b1693835fbb.jpg_r_800x800_5f03ad73.jpg' ] } }, components: { CommonGallary }, methods: { handleBannerClick () { this.showGallery = true }, handlegalleryClose () { this.showGallery = false } } } </script> <style lang="stylus" scoped> .banner overflow:hidden height:0 padding-bottom:55% position:relative .banner-img{ width:100% } .banner-info display:flex position:absolute left:0 right:0 bottom:0 line-height:0.6rem background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8)) color:#fff .banner-title flex:1 font-size:.32rem padding:0 .2rem .banner-number padding:0 .4rem height:.32rem line-height:.4rem margin-top:.24rem border-radius:.2rem background:rgba(0,0,0,.8) font-size:0.24rem .iconfont font-size:.24rem </style> 未完，待续