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

四、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组件的渐隐渐现动画效果

1. 动态给header绑定样式：:style="opacityStyle"
2. 在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)}