Vue.js学习记录-16-Vue去哪儿网项目实战：城市列表页开发-Header + List + 细节配置补充 + 总结

• Header：隐藏页面头(动态Style)

  写在开头，Header组件主要包括两个细节点：

  1. Banner、Header点击返回按钮路由跳转

  2. 当用户拖动该部分向下移动时，隐藏页面头的渐变展示

  细节1：返回按钮均属于Header组件
  

  细节2：该部分向下进行拖动时，隐藏表头渐变显示，采用ShowAbs进行内容展示控制，采用钩子函数以及全局变量window进行实现

  data数据初始化：

    data() {
      return {
        showAbs: true,
        opacityStyle: {
          opacity: 0
        }
      }
    },
  

  钩子函数操作全局变量window：添加事件监听器，由于window是全局变量，在组件中使用完毕后应该进行全局事件解绑

    activated() {
        // 由于采用了keep-alive，页面被展示该钩子函数被执行
        // 全局变量window，需要进行全局事件解绑
        window.addEventListener('scroll', this.handleScroll)
    },
    deactivated() {
        // keep-alive 页面即将被隐藏，替代的时候，该钩子函数会执行，全局事件解绑
        window.removeEventListener('scroll', this.handleScroll)
    }
  

  滚动方法：handleScroll

    handleScroll() {
      // 获取滚动高度 const常量
      const top = document.documentElement.scrollTop
      if (top > 60) {
        // 渐隐渐现效果实现 let局部变量
        let opacity = top / 140
        // opacity值只能是0 或者 1
        opacity = opacity > 1 ? 1 : opacity
        // 动态样式更改
        this.opacityStyle = {opacity}
        // 显示控制更改
        this.showAbs = false
      } else {
        this.showAbs = true
      }
    }
  

• List：门票详情(组件递归调用)

  接收父组件传递参数：list

    props: {
      list: Array
    }
  

  递归调用自身组件：v-if进行数据是否存在子节点，模板内部调用自身组件List，并将子节点作为参数传入

    <div class="detail-list-item" v-for="(item, index) in list" :key="index">
      <div class="item-title border-bottom">
        <span class="itme-title-icon"></span>
        {{item.title}}
      </div>
      <!-- 判断数据是否存在子级数据，存在则采用递归组件：再次调用组件本身 -->
      <div v-if="item.children" class="item-children">
        <!-- 参数将采用子级数据项 -->
        <detail-list :list="item.children">
        </detail-list>
      </div>
    </div>
  

  这里遇到了CSS污染的问题，出在最外层div上，一开始class=“item”，结果使用了其他组件中item的样式，于是进行了名称变更detail-list-item解决了问题，style下为进行样式声明的，很容易其他组件CSS的污染，建议命名时也进行区分处理。

• 细节配置补充

  keep-alive exclude去除无需进行缓存的组件，注意组件name对应

  由于点击景点详情时，需要进行数据请求，由于在路由页面上采用了keep-alive处理，页面会被缓存，因此针对Detail组件进行去除缓存处理。

    <!-- exclude 除去不需要做缓存的组件 -->
    <keep-alive exclude="Detail">
      <!-- 当前路由地址所对应的内容 -->
      <router-view/>
    </keep-alive>
  

  滚动行为：页面路由进行切换时，不触发滚动行为。

  坐标：/router/index.js

    // 滚动行为：当进行也面路由切换时，不发生滚动行为
    scrollBehavior(to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
  

  详情见：https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html

  出现问题：Detail页面拖动至下方，Header部分无法显示

  这是由于，我们在keep-alive中去除了Detail的组件缓存，而Detail的Header子组件中对window的全局变量事件控制放在了
  activated、deactivated钩子函数中，而这两个钩子函数只有当页面存在缓存时才会执行，此时页面并未进行缓存，因此该功能失效。

  解决方案：采用mounted、unmounted钩子函数进行替换，在页面完成渲染之后会执行该钩子函数。见下图：
  

4. 项目总结

项目到这里就告一段落了，博文更新的时间跨度为一个半月，当然都是实习工作日没有具体业务开发的时候充电所开展的。个人觉得跟着教程学了一遍，在写博客的时候有些地方又想不起来了，又会回顾视频的细节讲解。而且，从学习完一个章节，到开始整理写博客基本上是几天之后了，所以写博客的时候总会感觉啥都想不起了，又会对教程、源码进行翻看，去研究这里究竟是怎样实现的。 觉得这样也挺好，学习 + 回顾，这也算是我对前端技术的第一个学习项目吧，一直做web后端的开发，虽然很向往真正意义上的前后端分离开发，但总是碍于实际情况不得不前后都兼顾。

最大的收获是对前端的架构有了很多了解：MVVM模式、组件开发思想、webpack打包方式、node环境使用、Vue-cli脚手架使用、npm的了解使用、git线上线下使用规范、单页应用的了解学习。

其实关于单页应用，当我npm run build之后看到的dist目录下的内容，我是很吃惊的，一个Html、一个static文件夹(css + js)，这就是打包好的单页应用。 实际的开发你可能是web端、Android端、小程序端、客户端，这些客户端都面向一个服务端进行接口数据请求，多样化的前端展现样式以及高效率的打包方式也是以后前端的发展趋势。很荣幸，在这个项目中我看到了，很强很强。

在这个过程中，在实际项目中，也使用JQuery做了很多页面请求、动态加载options、事件控制、字段验证等操作，当然代码写的应该是经不起review的。不过，对于一个做后端的人来讲，我觉得还是有进步的，从一开始的抵触前端、到适应、逐渐去学习，甚至前端水很深，但是必要的学习了解还是必须的，后续也会继续进行深入学习。尤其是CSS，我想这是短板，布局思想，样式微调这些总是很懵，有时间会回顾下基础知识，在做深入学习。

总结就到这里了，感触良多还是，在这个知识大爆炸的年代，着实我还是有点迷茫的，不管了，先改BUG去了~~