vue去哪app

去哪网app

1.项目初始化

1. reset.css 在main.js中引入，来进行项目样式的初始化

2. iconfont 在main.js中引入 ， 进行全局的字体图标

3. Fastclick 在main.js中引入，fastclick.attach(document.body);调用，来解决点击3秒延迟问题

2. HOME页面

首页完成效果


Header组件

Swiper组件

1. Vue-swiper-awesome 第三方js库， 实现轮播图，使用方法见官网
2. 利用 在 swiper 在 外边 包上 一个指定 高度的 盒子 wrapper来解决 ， 页面图片的抖动问题。

1.第一种方法 (适配性强)
.wrapper {
  overflow: hidden;
   100% ;
  height: 0;
  padding-bottom: 相对于图片宽度的百分比x;
}
2.第二种方法（兼容性不强）
.wrapper {
   100%;
  height: 0.26vw;
}

3. 改变第三方组件样式

因为 scoped 原因写的样式只能作用于当前组件， 无法作用于 当前第三方组件中定义好的样式，所以利用穿透来改变

.wrapper >>> .swiper-pagination-bullet-active
        background-color #fff

ICons图标组件


1. 利用swiper来实现分页效果。
2. 通过computed计算属性，pages() 函数 来返回一个数据结构类似于 哈希链地址法, 用来进行嵌套循环的遍历。
3. 换行 显示省略号 。

		overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;

推荐组件


周末去哪组件


通过AJAX请求来获取数据

1. 每个页面组件各自来获取数据会多次发送请求，造成资源的浪费，所以我们通过index.vue 来发送请求再 利用 父子组件传值来进行数据的传递。
2. mock数据 放在 public 文件下， 因为 webpack-dev-server 默认 把根目录下的public文件夹 作为 根目录 ，然后用 axios 来发送请求 就可以获取到 数据 。

3.PLACES页面

地方页面完成效果


Header组件封装

LIST组件封装

1. 由于这个组件给了绝对定位所以无法进行手指上下拖动， 所以 用了 better-scroll 这个第三方js库 ，来实现页面的的上下滚动。

字母表组件封装

1. 运用固定定位 定位于页面的右侧， 实现字母的 竖直方向 均分 ，可以利用 flex 布局 。

字母表联动效果

1. 兄弟组件之间的传值，通过 父组件 中间人 进行传递 。
2. 实现点击滚动， 我们只需要 获取到 需要展示 区域 的 dom元素 再利用 better-scroll 提供的api 即可完成，利用 watch 来 调用 屏幕滚动 的 api

//首先需要注册详情见官网
this.scroll.scrollToElement(dom元素)

3. 拖动

4. 需要获取手 拖动到 的 字母， 需要 开始拖动 ，拖动过程， 结束拖动三个函数，通过 offsetTop 来计算出 拖动 到 的 元素 ，拖动过程中触发 拖动过程 这个函数， 通过 以上来实现 拖动字幕条 页面 滚动 的效果。

性能优化

1. 计算 A 距离 顶部的高度时，因为是固定的 所以只需要 计算一遍 即可 。 我们 利用 update 这个生命周期函数 来进行计算 （函数在 页面组件渲染完成， 和数据 进行更新时调用）。所以以上可以减少代码运行的次数。

2. touchMove 在手指 一 移动的时候就会调用 ， 执行的频率太高了，所以利用节流来减少执行的次数

data() {
  return {
    timer: null
  }
}
methods: {
	handleTouchMove() {
    if (this.timer) {
      clearTimeOut(timer)
    }
    this. timer = setTimeOut(() => {
      //执行的函数
    }, 16)
  }
}

搜索功能的实现

利用数据双向绑定获取到 输入在 输入框中的 自，然后去数据中 查找 ，找到返回，找不到 则显示 找不到数据

 watch: {
    keyWord() {
      if (!this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        const result = [];
        for (let i in this.cityList) {
          this.cityList[i].forEach(element => {
            if (
              element.name.indexOf(this.keyWord) > -1 ||
              element.spell.indexOf(this.keyWord) > -1
            ) {
              result.push(element.name);
            }
          });
        }
        this.list = result;
      }, 1000);
    }
  }

VUEX使用

详情见官网：

使用KEEP—ALIVE优化网页

问题引出： 当我们切换页面的时候 ，都会 再一次发送 ajax请求。这样很大的浪费了 资源。

解决方式： 可以用下图包裹上标签， 来缓存获取到的数据，此时挡在切换页面的时候，每个页面的钩子函数大多数不会执行，直接从缓存中获取数据。


如果在切换页面时， 页面的某些内容需要动态改变，可以利用 activated 这个生命周期函数。

需要根据选择的不同城市来进行数据的获得，但是利用了缓存ajax请求就不在发送，所以我们用下图的方式，先判断是否需要重新获取数据：


4.详情页

详情页面完成效果：

BANNER组件：

实现banner组件下面的渐变效果，利用如下方式：


画廊组件

效果图如下：


点击Banner 将显示 画廊组件：如上图

1. 布局：外部用父容器包裹，内部用第三方js插件库vue-awesome-swiper，上述的swiper插件库是基于swiper 这个库的，vue-awesome-swiper@2.6.7基于swiper3。
2. 问题：底部的分页器样式不是希望的那样，可以去官网看配置。还有就是swiper组件显示与隐藏时宽度计算会错误，导致无法拉动轮播，解决方法一并如下：


3. 逻辑： 点击BANNER 显示画廊， 点击CORRIDOR黑色区域隐藏画廊。涉及到父子组件之间的传值。

HEADER组件

1. 功能要求： 随着页面滚动到60距离，左上角返回按钮隐藏。header 在页面滚动60到140 之间逐渐显现

2. 功能实现： 左上角的按钮效果好实现， header逐渐显示只要根据 页面滚动距离 与 140 的相除 就是 opcity。

methods: {
  handleWindowScorll() {
    const top = document.documentElement.scrollTop;//垂直方向
    if(top > 60) {
		this.opcity = top > 140 ? 1 : top / 140
    }
  }
}

activated {
  windows.addEventListener("scorll", this.handleWindowScorll)
}

3. 实现思路： 1.监听页面滚动 2.由于用了页面数据缓存所以要用activated钩子函数 3. 要实现逐渐显示： 透明度样式 与 高度的 对应关系 要明确。

4. 问题解决： 由于 监听滚动时间绑定在了 全局 window实例上， 所以不论那个页面滚动 都会触发，这样是不好的。 所以我们在 页面 离开时 解绑就可以解决了：


递归组件


1. 问题引入： 如何实现上图中这样的层级关系。
2. 问题解决： 利用递归组件： 递归组件就是自己组件调用自身， 自身的组件中的name 属性 ，给自己提供了一种调用方式。这一次组件的调用 与这个组件本身调用的 规则一样。


问题解决：

取消某个组件的缓存：


解决页面滚动切换页面复原问题：


组件的动态过度

1. 创建一个transition 组件， 之间用插槽来 可以让 需要过渡效果的组件 能插入其中。
2. 书写效果， 然后 引入 包裹住 就可以了。

项目接口调试，打包上线

接口调试：

由于用了代理 在 config文件夹下：


真机调试：

1. 由于服务器是通过 webpack-dev-server 启动的 ，所以不支持 域名访问 的 方式，可以通过 修改package.json 来配置一下， 如下图：


2. BUG： 拖动字母表整个页面往下动，解决方式如下 ：来阻止拖动事件的默认行为
   

3. 由于一些手机等级较低，不支持一些js的 新语法，会报错所以用 babel-polyfill 来解决js 的兼容问题