| 2020/11/04、 周四、今天又是奋斗的一天。 |
@author：runsen
写在前面：我是「runsen」，热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端，需要每天的日积月累， 每天都要加油！！！
今天继续深入vue项目城市详细页的动态路由，banner布局和公用图片画廊组件拆分。
文章目录
- 动态路由
- banner.vue
- gallary.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">&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: background-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
>
<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: .wrapperheight: 0width: 100%padding-bottom: 100%.gallary-imgwidth: 100%.swiper-paginationcolor: bottom: -1rem
</style
>
总结
以上是尊龙游戏旗舰厅官网为你收集整理的七十三、vue项目城市详细页的动态路由，banner布局和公用图片画廊组件拆分的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。
