【vue】四、vue2仿去哪儿网app—

【vue】四、vue2仿去哪儿网app——景点详情页面

本文主要是介绍【vue】四、vue2仿去哪儿网app——景点详情页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

四、vue2仿去哪儿网app——景点详情页面
- - Ⅰ项目结构
  - Ⅱ 开发笔记及注意点
  - - - 1.实现点击banner图，弹出一个画廊组件（图片的轮播）
      - 2.实现页面滑动至离顶部60时，出现Header组件
      - 3.实现Header组件的渐隐渐现动画效果
      - 4.对全局事件的解绑

四、vue2仿去哪儿网app——景点详情页面

Ⅰ项目结构

景点详情页

header部分
画廊页面
详情页

在这里插入图片描述

Ⅱ 开发笔记及注意点

1.实现点击banner图，弹出一个画廊组件（图片的轮播）

设置v-show来决定画廊组件是否出现，并且绑定图片的点击事件。

methods: {handleBannerClick () {this.showGallery = true}
}

2.实现页面滑动至离顶部60时，出现Header组件

由于使用了keep-alive，所以在activated()中绑定监听事件，当滑动事件发生时，调用handleScroll()函数：

methods: {handleScroll () {const top = document.documentElement.scrollTopif (top > 60) {this.showAbs = false} else {this.showAbs = true}}},activated () {window.addEventListener('scroll', this.handleScroll)}

3.实现Header组件的渐隐渐现动画效果

动态给header绑定样式：:style="opacityStyle"
在data中定义：

opacityStyle: {opacity: 0
}

3.当滑动距离在60-140之间时，设置渐隐渐现效果，当距离超过140时，opacity设为1：

handleScroll () {const top = document.documentElement.scrollTopif (top > 60) {let opacity = top / 140opacity = opacity > 1 ? 1 : opacitythis.opacityStyle = { opacity }this.showAbs = false} else {this.showAbs = true}}

4.对全局事件的解绑

在上面的Header.vue组件中使用了全局事件

activated () {window.addEventListener('scroll',this.handleScroll)
}

上面的代码不止在详情页面中会触发，而且在其他页面也会触发，因为这是一个全局事件，所以这里我们需要使用对这个全局事件进行解绑

activated () {window.addEventListener('scroll', this.doScroll)
}// 页面被隐藏或者页面被替换成新的组件时触发的deactivated () {window.removeEventListener('scroll',this.handleScroll)}