Vue2.5开发去哪儿网App 详情页面开发
一，banner 图的设计
1. 新建detail的路由
import Detail from '@/pages/detail/Detail'
......
{
path: '/detail',
name: 'Detail',
component: Detail
}
Detail.vue
<template>
<div>
<detail-banner></detail-banner>
</div>
</template> <script>
import DetailBanner from './components/Banner'
export default {
name: 'Detail',
components: {
DetailBanner
}
}
</script> <style> </style>
新建 Banner.vue组件
<template>
<div class="banner">
<img src="http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_600x330_f922b488.jpg"
class="banner-img" alt="">
<div class="banner-info">
<div class="banner-title">故宫(AAAAA景区)</div>
<div class="banner-number"><span class="iconfont banner-icon"></span>39</div>
</div>
</div>
</template> <script>
export default {
name: 'DetailBanner'
}
</script> <style lang="stylus" scoped>
.banner
position relative
overflow hidden
height 0
padding-bottom 55%
.banner-img
width 100%
.banner-info
position absolute
color #ffffff
left 0
right 0
bottom 0
line-height .6rem
background-image linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
display flex
.banner-title
font-size .32rem
padding 0 .2rem
flex 1
.banner-number
margin .14rem
padding 0 .3rem
line-height .4rem
height .32rem
font-size .24rem
border-radius .2rem
background rgba(0, 0, 0, 8)
.banner-icon
font-size .24rem
padding .02rem
</style>
二，公用图片画廊组件
1. 创建一个公用组件 Gallary.vue
使用 vue-awesome-swiper 完成图片滚动
<template>
<div class="container" @click="HandleClick">
<div class="wrapper">
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide v-for="(item,index) in imgs" :key="index">
<img class="gallery-img" :src="item" alt="">
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</template> <script>
export default {
name: 'CommonGallary',
props: {
imgs: {
type: Array
}
},
methods: {
HandleClick () {
// 关闭
this.$emit('close')
}
},
data () {
return {
swiperOption: {
loop: true,
pagination: '.swiper-pagination',
paginationType: 'fraction',
// observer启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
// 默认false
observer: true,
observeParents: true
}
}
}
}
</script> <style lang="stylus" scoped>
.container >>> .swiper-container
overflow inherit
.container
display flex
flex-direction column
justify-content: center
background-color #000
position fixed
top 0
left 0
right 0
bottom 0
z-index 999
.wrapper
padding-bottom 100%
height 0
width 100%
.gallery-img
width 100%
.swiper-pagination
color #fff
bottom -1rem
</style>
2. Banner.vue
定义变量 showGallary 负责照片墙的显示与否
<common-gallary @close="HandleClose" :imgs="imgs" v-show="showGallary"></common-gallary>
监听变化，传入图片数据，显示与否
<template>
<div>
<div class="banner">
<img v-show="!showGallary" @click="handleImgClick" src="http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_600x330_f922b488.jpg"
class="banner-img" alt="">
<div class="banner-info">
<div class="banner-title">故宫(AAAAA景区)</div>
<div class="banner-number"><span class="iconfont banner-icon"></span>39</div>
</div>
</div>
<common-gallary @close="HandleClose" :imgs="imgs" v-show="showGallary"></common-gallary>
</div>
</template> <script>
import CommonGallary from 'common/gallary/Gallary'
export default {
name: 'DetailBanner',
data () {
return {
imgs: [
'http://img1.qunarzz.com/sight/p0/1510/8e/8eea8eb6f41698290.img.jpg_r_800x800_83a5fe3a.jpg',
'http://img1.qunarzz.com/sight/p0/1510/ca/ca60a080020329ef90.img.jpg_350x240_9ff2208e.jpg',
'http://img1.qunarzz.com/sight/p0/1510/cc/ccafbdaac21bdbf790.img.jpg_350x240_c35f8451.jpg'
],
showGallary: false
}
},
methods: {
handleImgClick () {
this.showGallary = true
},
HandleClose () {
this.showGallary = false
}
},
components: {
CommonGallary
}
}
</script> <style lang="stylus" scoped>
.banner
position relative
overflow hidden
height 0
padding-bottom 55%
.banner-img
width 100%
.banner-info
position absolute
color #ffffff
left 0
right 0
bottom 0
line-height .6rem
background-image linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
display flex
.banner-title
font-size .32rem
padding 0 .2rem
flex 1
.banner-number
margin .14rem
padding 0 .3rem
line-height .4rem
height .32rem
font-size .24rem
border-radius .2rem
background rgba(0, 0, 0, 8)
.banner-icon
font-size .24rem
padding .02rem
</style>
三，header 渐隐渐现效果
后退符号制作：
<router-link tag="div" to="/" class="header-abs">
<div class="iconfont back-icon header-abs-back"></div>
</router-link>
显示详情：
<div class="header-fixed" v-show="!showAbs">
<router-link to="/">
<div class="iconfont back-icon header-fixed-back"></div>
</router-link>
景点详情
</div>
当下滑一定距离，header-fixed 显示出来
添加绑定滚动事件
methods: {
handleScroll () {
console.log(document.documentElement.scrollTop)
}
},
activated () {
window.addEventListener('scroll', this.handleScroll)
}
当滚动> 60 时，显示出来
handleScroll () {
const top = document.documentElement.scrollTop
if (top > 60) {
this.showAbs = false
} else {
this.showAbs = true
}
}
渐隐渐现制作：
opacityStyle // 渐隐渐现变量
给header-fixed绑定 :style="opacityStyle"
handleScroll () {
const top = document.documentElement.scrollTop
if (top > 60) {
let opacity = top / 140
opacity = opacity > 1 ? 1 : opacity
this.opacityStyle = { opacity }
this.showAbs = false
} else {
this.showAbs = true
}
}
<template>
<div>
<router-link v-show="showAbs" tag="div" to="/" class="header-abs">
<div class="iconfont back-icon header-abs-back"></div>
</router-link>
<div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
<router-link to="/">
<div class="iconfont back-icon header-fixed-back"></div>
</router-link>
景点详情
</div>
</div>
</template> <script>
export default {
name: 'DetailHeader',
data () {
return {
showAbs: true,
opacityStyle: {
opacity: 0
}
}
},
methods: {
handleScroll () {
const top = document.documentElement.scrollTop
if (top > 60) {
let opacity = top / 140
opacity = opacity > 1 ? 1 : opacity
this.opacityStyle = { opacity }
this.showAbs = false
} else {
this.showAbs = true
}
}
},
activated () {
window.addEventListener('scroll', this.handleScroll)
}
}
</script> <style lang="stylus" scoped>
@import "~styles/varibles.styl"
.header-abs
position: absolute
left .2rem
top .2rem
width .8rem
height .8rem
line-height .8rem
border-radius .4rem
text-align center
background rgba(0,0,0,.8)
.header-abs-back
color #ffffff
font-size .4rem
.header-fixed
position fixed
top 0
left 0
right 0
overflow hidden
height $headerHeight
line-height $headerHeight
color #ffffff
background $bgColor
text-align center
font-size .32rem
.header-fixed-back
color #ffffff
position absolute
top 0
left 0
width .64rem
</style>
Header.vue
四，对全局事件解绑
因为绑定了 window.addEventListener（......）
对其他组件也产生影响
activated () {
window.addEventListener('scroll', this.handleScroll)
},
// 解绑
deactivated () {
window.removeEventListener('scroll', this.handleScroll)
}
五，递归组件实现详情页列表
例如有以下数据：
list: [
{
title: '成人票',
children: [
{
title: '特惠双人票'
},
{
title: '三人票',
children: [
{
title: '包午餐三人票'
}
]
}
]
},
{
title: '学生票',
children: [
{
title: '学生票七日游'
}
]
},
{
title: '儿童票'
},
{
title: '特惠票'
}
]
新建LIst.vue
<div class="item" v-for="(item,index) in list" :key="index">
<div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{item.title}}
</div>
<div v-if="item.children" class="children">
// 多层遍历
<detail-list :list="item.children"></detail-list>
</div>
</div>
<template>
<div>
<div class="item" v-for="(item,index) in list" :key="index">
<div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{item.title}}
</div>
<div v-if="item.children" class="children">
<detail-list :list="item.children"></detail-list>
</div>
</div>
</div>
</template> <script>
export default {
name: 'DetailList',
props: {
list: Array
}
}
</script> <style lang="stylus" scoped>
.item-title
line-height .8rem
font-size .32rem
padding 0 .2rem
.item-title-icon
display: inline-block;
width: .36rem;
height: .36rem;
background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
margin-right: .1rem;
background-size: .4rem 3rem
position relative
left .06rem
top: .06rem
.children
padding 0 .5rem
</style>
List.vue
Vue2.5开发去哪儿网App 详情页面开发的更多相关文章
- Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化
一, 兄弟组件间联动 1. 点击城市字母,左侧对应显示 给遍历的 字母 添加一个点击事件: Alphabet.vue @click="handleLetterClick" ha ...
- Vue2.5开发去哪儿网App 城市列表开发
一,城市选择页面路由配置 ...
- Vue2.5 开发去哪儿网App
Vue2.5开发去哪儿网App 技术栈和主要框架
- Vue2.5开发去哪儿网App 从零基础入门到实战项目
第1章 课程介绍本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程简介 试看第2章 Vue 起步本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基 ...
- Vue2.5开发去哪儿网App 首页开发
主页划 5 个组件,即 header icon swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --s ...
- Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用
一,数据共享 1. 安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...
- Vue2.5开发去哪儿网App 第五章笔记 上
1.css动画原理 .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 2s; } .fade-leave-to{ o ...
- Vue2.5开发去哪儿网App 搜索功能完成
效果展示: Search.vue: <div class="search-content" ref="search" v-show="keywo ...
- Vue2.5开发去哪儿网App 第五章笔记 下
1. 多个元素或组件的过渡 多个元素的过渡: <style> .v-enter,.v-leace-to{ opacity: 0; } .v-enter-active,.v-leave-ac ...
随机推荐
- [Python] 怎么把HTML的报告转换为图片，利用无头浏览器
How to convert HTML Report to picture format in Email? So that we can see the automation report also ...
- goaccess
找了各种工具,最终还是觉得goaccess不仅图文并茂,而且速度快,每秒8W 的日志记录解析速度,websocket10秒刷新统计数据,站在巨人肩膀上你也会看得更远…先上图: 具体方案如下步骤: 一 ...
- Spring Boot学习笔记：整合Shiro
Spring Boot如何和Shiro进行整合: 先自定义一个Realm继承AuthorizingRealm,并实现其中的两个方法,分别对应认证doGetAuthenticationInfo和授权do ...
- 【转】机器学习在B2B的应用
原文地址:http://www.mbtmag.com/blog/2017/04/artificial-intelligence-making-it-work-industrial-companies? ...
- PowerShell工作流学习-1-嵌套工作流和嵌套函数
关键点: a)嵌套深度没有任何语法限制,但是嵌套三个层次的工作流不支持任何通用参数,包括工作流通用参数 b)嵌套工作流可以调用当前范围和任何父范围内的工作流和函数 c)工作流不允许递归调用,脚本和函数 ...
- 连接SSH服务器的脚本，自动发送用户名和密码
利用expect 自动输入用户名和密码 脚本如下 #!/usr/bin/expect # connect ssh server set timeout 30 spawn ssh -l user_nam ...
- 使用 IncrediBuild 提升 VisualStudio 编译速度
我现在有一个 100M 的代码,需要快速去编译他,我寻找了很多方法,本文记录我找到的 IncrediBuild 用于提交编译速度. 如果一个项目存在很多不相互依赖的项目,那么使用 IncrediBui ...
- java之Stack详细介绍
1 Stack介绍 Stack简介 Stack是栈.它的特性是:先进后出(FILO, First In Last Out). java工具包中的Stack是继承于Vector(矢量队列)的,由于Ve ...
- SQL-2--TRIGGER
触发器TRIGGER 是一个被指定关联到一个表的数据库对象,当对一个表的特定事件出现时,它将被激活. 触发器是数据库响应 INSERT , UPDATE, DELITE 语句而自动执行的一条SQL语句 ...
- kill 结束进程
kill 支持的信号 kill -1 重启进程 kill -9 终止进程 pkill 和 killall 的区别在于pkill 可以踢终端用户 pkill -9 -t tty1