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

阅读: 评论:0

【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组件的渐隐渐现动画效果
  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 () {veEventListener('scroll',this.handleScroll)}

本文发布于:2024-01-29 07:22:07,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170648413213644.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:景点   去哪儿   详情   页面   vue
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23