动态路由

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布局和公用图片画廊组件拆分相关推荐

十二、Vue项目 - 详情页动态路由、banner布局和公用图片画廊组件拆分
我是一个小菜鸡啊小菜鸡,但是小菜鸡要继续学新东西啊,新的一周加油吧!!! 文章目录配置动态路由 banner.vue 公用图片画廊组件拆分 src下新建common文件夹 banner.vue中使用 ...
七十四、完成Vue项目城市详细页，并实现打包
2020/11/09. 周一.今天又是奋斗的一天. @Author:Runsen 今天完成Vue项目城市详细页,并通过npm run build实现打包. Banner.vue <templat ...
七十一、Vue项目城市选择页搜索逻辑实现，边输入边搜索功能的解决办法：节流函数
2020/10/30. 周五.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
六十九、完成Vue项目城市选择页，路由配置，搜索框布局、列表布局、BetterScroll 的使用和字母表布局
2020/10/28. 周三.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
vue项目实现详情页后退缓存之前的数据
vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57 不想写代码的程序员阅读数:244 一.需要缓存的内容: 1.后退缓存条件查询的数据 2.后退缓存分页信息二.实现 ...
将Vue项目部署在Nginx,解决前端路由、反向代理和静态资源问题
将Vue项目部署在Nginx,解决前端路由.反向代理和静态资源问题需求: 一台服务器,Linux 安装了Nginx 使用Vue脚手架编写的Vue项目第一步:将Vue项目打包,然后将生成的dist文 ...
在vue项目前端如何实现展示动态小程序二维码
在vue项目前端如何实现展示动态小程序二维码 (就是根据所对应的商家数据展示一个动态的二维码) 首先,主要的工作还是后端和小程序前端的工作,我们vue项目的前端主要是根据他们给出的url一级所对应的参 ...
VUE项目从详情页退回列表页，保留列表页的筛选条件（筛选条件为单选），以及刷新后恢复默认的一个筛选状态
vue项目做的一个"花名册"页面,从"花名册"页面可以点击某一个人的名字,进入这个人的信息详情表格页面,而且这个人的信息详情页面中有一个"直属上级&q ...
【 Vue全家桶 · Vue CLI（四）】Vue项目的详细目录结构解析
文章目录前言 -- 一级目录解析一. dist 二. node_modules 三. public 四. src(基础版) 4.1 main.js 4.2 App.vue 4.3 src / as ...

七十三、Vue项目城市详细页的动态路由，Banner布局和公用图片画廊组件拆分

文章目录

动态路由

Banner.vue

Gallary.vue

七十三、Vue项目城市详细页的动态路由，Banner布局和公用图片画廊组件拆分相关推荐

最新文章

热门文章