【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.scrollTop
      if (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.scrollTop
      if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.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)
  }