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 ...
随机推荐
- .net 简单任务调度平台安装简要说明
.net 简单任务调度平台,用于.net dll,exe的任务的挂载,任务的隔离,调度执行,访问权限控制,监控,管理,日志,错误预警,性能分析等. 平台基于quartz.net进行任务调度功能开发,采 ...
- JavaSE 初学进度条JProgressBar
预备知识 创建进度条类后将其直接加入JFrame看看效果 public class JProgressBarDemo2 { public static void main(String args[]) ...
- MD5加密算法的Java版本
网上搜索Java实现MD5的资料很多,错误的也很多. 之前编写的一个阿里云直播鉴权原理算法需要用到MD5算法,网上找了几个,都是不行,浪费了时间,现在贴一个,做备用. import java.secu ...
- 图解HTTP第一章
了解 Web 及网络基础 Web 页面是如何呈现的吗? Web 使用一种名为 HTTP(HyperText Transfer Protocol,超文本传输协议)的协议作为规范,完成从客户端到服务器端等 ...
- 小米open-falcon监控系统接入手册
一.新项目接入 0.官方文档: https://book.open-falcon.org/zh_0_2/usage/getting-started.html 1.联系运维人员确定可以使用监控系统: ( ...
- Linux 网卡Bond模式
网卡bond是通过把多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡. 有7种模式: mod 0/mod 1/mod 2/mod 3/mod 4/mod 5 mod=0 ,即:(ba ...
- js删除map中元素
js中删除map中元素后,map的长度不变,这时需要我们自己处理 delete vacc[0]; delete vacc[1]; ClearNullArr(vacc); //清除vacc中的null值 ...
- Js表单验证控件-02 Ajax验证
在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...
- Visual Studio 2017中使用正则修改部分内容
最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效果如下 修改前: /// <summary> /// ...
- 另一个画风的GSS1 - Can you answer these queries I（猫树）
前言 其实我觉得你看猫锟的解释也看不懂(主要是还有一些不良心的讲解者不讲清楚,当然这里不是针对了qwq) 猫锟链接 Solution 考虑我们的线段树是个啥玩意? 每一层都是一堆区间叠在一起. 我们在 ...