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

最新推荐文章于 2025-04-08 14:38:54 发布

Live wild

最新推荐文章于 2025-04-08 14:38:54 发布

阅读量796

点赞数

分类专栏：实战项目笔记 vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43473114/article/details/103683584

版权

实战项目笔记同时被 2 个专栏收录

6 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

详情页面

组件结构

在这里插入图片描述

1. 路由

动态路由

	{
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }

	<router-link :to="'/detail/' + item.id" tag="li" >
    </router-link>  //使用tag属性可以改变router-link的a标签

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

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

2. DetailBanner

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

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

flex布局

<div class="banner-info">
    <div class="banner-title">{{this.title}}</div>
    <div class="banner-number">视频<span class="iconfont banner-icon">&#xe62d;</span></div>
</div>
  
.banner-info
  display: flex
  position: absolute
  left: 0
  right: 0
  bottom: 0
  .banner-title
    flex: 1

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

3. DetailHeader

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
  }
} }

对全局事件的解绑
给一个组件添加了keep-alive后，多一个生命周期activated，在每一次页面展示时都会执行。
但同时话多了一个生命周期函数deactivated,当页面即将被隐藏或页面即将被替换成新的页面时被执行。
```
deactivated () {
window.removeEventListener('scroll', this.handleScroll)
}                //这样就可以解绑全局事件，防止这个全局事件污染别的页面。
```

4. DetailList

使用递归组件实现详情页列表（希望把二、三级列表项也显示出来）
递归组件就是在组件的自身去调用自身组件。
```
<div v-if="item.children" class="item-children">
    <detail-list :list="item.children"></detail-list>
</div>
```

5. 动画

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

<template>
   <transition>
     <slot></slot>
   </transition>
</template>

<script>
export default {
 name: 'CommonFade'
}
</script>

<style lang="stylus" scoped>
 .v-enter, v-leave-to
   opacity: 0
 .v-enter-active, .v-leave-active
   transition: opacity .5s
</style>