2020/11/04、 周四、今天又是奮斗的一天。

@Author：Runsen

寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累， 每天都要加油！！！

今天繼續深入Vue項目城市詳細頁的動態路由，Banner布局和公用圖片畫廊組件拆分。

文章目錄

• 動態路由
• Banner.vue
• Gallary.vue

動態路由

Banner.vue

<template><div><div class="banner" @click="handleBannerClick"><img class="banner-img" src="http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg" /><div class="banner-info"><div class="banner-tittle">大連圣亞海洋世界(AAAA景區)</div><div class="banner-number"><span class="iconfont banner-icon">&#xe6c4;</span>39</div></div></div><common-gallary:imgs="imgs"v-show="showGallary"@close="handleGallaryClose"></common-gallary></div> </template><script> import CommonGallary from 'common/gallary/Gallary' export default {name: 'DetailBanner',data () {return {showGallary: false,imgs: ['http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_800x800_70debc93.jpg', 'http://img1.qunarzz.com/sight/p0/1709/76/7691528bc7d7ad3ca3.img.png_800x800_9ef05ee7.png']}},methods: {handleBannerClick () {this.showGallary = true},handleGallaryClose () {this.showGallary = false}},components: {CommonGallary} } </script><style lang="stylus" scoped>.bannerposition: relativeoverflow: hiddenheight: 0padding-bottom: 55%.banner-imgwidth: 100%.banner-infodisplay: flexposition: absoluteleft: 0right: 0bottom: 0line-height: .6remcolor: #fffbackground-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)).banner-tittleflex: 1font-size: .32rempadding: 0 .2rem.banner-numberheight: .32remline-height: .32remmargin-top: .14rempadding: 0 .4remborder-radius: .2rembackground: rgba(0, 0, 0, .8)font-size: .24rem.banner-iconfont-size: .24rem </style>

Gallary.vue

<template><div class="container" @click="handleGallaryClick"><div class="wrapper"><swiper :options="swiperOptions"><swiper-slidev-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 {swiperOptions: {pagination: '.swiper-pagination',paginationType: 'fraction',observeParents: true,observer: true}}},methods: {handleGallaryClick () {this.$emit('close')}} } </script><style lang="stylus" scoped>.container >>> .swiper-containeroverflow: inherit.containerdisplay: flexflex-direction: columnjustify-content: centerz-index: 99position: fixedleft: 0right: 0top: 0bottom: 0background: #000.wrapperheight: 0width: 100%padding-bottom: 100%.gallary-imgwidth: 100%.swiper-paginationcolor: #fffbottom: -1rem </style>

總結

以上是生活随笔為你收集整理的七十三、Vue项目城市详细页的动态路由，Banner布局和公用图片画廊组件拆分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。