去哪儿网app实战项目笔记——详情页面

详情页面

组件结构

1. 路由

1. 动态路由

   	{
         path: '/detail/:id',
         name: 'Detail',
         component: Detail
       }
   
   	
         //使用tag属性可以改变router-link的a标签
   

2. 消除多个页面之间的互相影响

   scrollBehavior (to, from, savedPosition) {
   return { x: 0, y: 0 }
   }
   

2. DetailBanner

1. css3属性——背景渐变linear-gradient()

   background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
   

2. flex布局

   
       
   {{this.title}}
       
   视频
   
     
   .banner-info
     display: flex
     position: absolute
     left: 0
     right: 0
     bottom: 0
     .banner-title
       flex: 1
   

   
3. CommonGallary
   主要是使用第三方轮播插件vue-awesome-swiper

3. DetailHeader

1. DetailHeader组件的逻辑

   activated () {
   window.addEventListener('scroll', this.handleScroll) },
   
   methods: {
   handleScroll () {
     const top = document.documentElement.scrollTop
     if (top > 60 && top < 140) {
       const opacity = top / 140    //渐隐渐显效果
       this.opacityStyle = {
         opacity: opacity
       }
       this.showAbs = false
     } else if (top > 140) {
       this.showAbs = false
     } else {
       this.showAbs = true
     }
   } }
   

2. 对全局事件的解绑
   给一个组件添加了keep-alive后，多一个生命周期activated，在每一次页面展示时都会执行。
   但同时话多了一个生命周期函数deactivated,当页面即将被隐藏或页面即将被替换成新的页面时被执行。

   deactivated () {
   window.removeEventListener('scroll', this.handleScroll)
   }                //这样就可以解绑全局事件，防止这个全局事件污染别的页面。
   

4. DetailList

1. 使用递归组件实现详情页列表（希望把二、三级列表项也显示出来）
   递归组件就是在组件的自身去调用自身组件。

5. 动画

1.CommonFade组件，实现过渡动画