去哪网app
1.项目初始化
-
reset.css 在main.js中引入，来进行项目样式的初始化
-
iconfont 在main.js中引入 ， 进行全局的字体图标
-
Fastclick 在main.js中引入，fastclick.attach(document.body);调用，来解决点击3秒延迟问题
2. HOME页面
首页完成效果
Header组件
Swiper组件
- Vue-swiper-awesome 第三方js库， 实现轮播图，使用方法见官网
- 利用 在 swiper 在 外边 包上 一个指定 高度的 盒子 wrapper来解决 ， 页面图片的抖动问题。
1.第一种方法 (适配性强)
.wrapper {
overflow: hidden;
100% ;
height: 0;
padding-bottom: 相对于图片宽度的百分比x;
}
2.第二种方法（兼容性不强）
.wrapper {
100%;
height: 0.26vw;
}
- 改变第三方组件样式
因为 scoped 原因写的样式只能作用于当前组件， 无法作用于 当前第三方组件中定义好的样式，所以利用穿透来改变
.wrapper >>> .swiper-pagination-bullet-active
background-color #fff
ICons图标组件
- 利用swiper来实现分页效果。
- 通过computed计算属性，pages() 函数 来返回一个数据结构类似于 哈希链地址法, 用来进行嵌套循环的遍历。
- 换行 显示省略号 。
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
推荐组件
周末去哪组件
通过AJAX请求来获取数据
- 每个页面组件各自来获取数据会多次发送请求，造成资源的浪费，所以我们通过index.vue 来发送请求再 利用 父子组件传值来进行数据的传递。
- mock数据 放在 public 文件下， 因为 webpack-dev-server 默认 把根目录下的public文件夹 作为 根目录 ，然后用 axios 来发送请求 就可以获取到 数据 。
3.PLACES页面
地方页面完成效果
Header组件封装
LIST组件封装
- 由于这个组件给了绝对定位所以无法进行手指上下拖动， 所以 用了 better-scroll 这个第三方js库 ，来实现页面的的上下滚动。
字母表组件封装
- 运用固定定位 定位于页面的右侧， 实现字母的 竖直方向 均分 ，可以利用 flex 布局 。
字母表联动效果
- 兄弟组件之间的传值，通过 父组件 中间人 进行传递 。
- 实现点击滚动， 我们只需要 获取到 需要展示 区域 的 dom元素 再利用 better-scroll 提供的api 即可完成，利用 watch 来 调用 屏幕滚动 的 api
//首先需要注册详情见官网
this.scroll.scrollToElement(dom元素)
-
拖动
-
需要获取手 拖动到 的 字母， 需要 开始拖动 ，拖动过程， 结束拖动三个函数，通过 offsetTop 来计算出 拖动 到 的 元素 ，拖动过程中触发 拖动过程 这个函数， 通过 以上来实现 拖动字幕条 页面 滚动 的效果。
性能优化
-
计算 A 距离 顶部的高度时，因为是固定的 所以只需要 计算一遍 即可 。 我们 利用 update 这个生命周期函数 来进行计算 （函数在 页面组件渲染完成， 和数据 进行更新时调用）。所以以上可以减少代码运行的次数。
-
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 将显示 画廊组件：如上图
- 布局：外部用父容器包裹，内部用第三方js插件库vue-awesome-swiper，上述的swiper插件库是基于swiper 这个库的，vue-awesome-swiper@2.6.7基于swiper3。
- 问题：底部的分页器样式不是希望的那样，可以去官网看配置。还有就是swiper组件显示与隐藏时宽度计算会错误，导致无法拉动轮播，解决方法一并如下：
- 逻辑： 点击BANNER 显示画廊， 点击CORRIDOR黑色区域隐藏画廊。涉及到父子组件之间的传值。
HEADER组件
-
功能要求： 随着页面滚动到60距离，左上角返回按钮隐藏。header 在页面滚动60到140 之间逐渐显现
-
功能实现： 左上角的按钮效果好实现， 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)
}
-
实现思路： 1.监听页面滚动 2.由于用了页面数据缓存所以要用activated钩子函数 3. 要实现逐渐显示： 透明度样式 与 高度的 对应关系 要明确。
-
问题解决： 由于 监听滚动时间绑定在了 全局 window实例上， 所以不论那个页面滚动 都会触发，这样是不好的。 所以我们在 页面 离开时 解绑就可以解决了：
递归组件
- 问题引入： 如何实现上图中这样的层级关系。
- 问题解决： 利用递归组件： 递归组件就是自己组件调用自身， 自身的组件中的name 属性 ，给自己提供了一种调用方式。这一次组件的调用 与这个组件本身调用的 规则一样。
问题解决：
取消某个组件的缓存：
解决页面滚动切换页面复原问题：
组件的动态过度
- 创建一个transition 组件， 之间用插槽来 可以让 需要过渡效果的组件 能插入其中。
- 书写效果， 然后 引入 包裹住 就可以了。
项目接口调试，打包上线
接口调试：
由于用了代理 在 config文件夹下：
真机调试：
- 由于服务器是通过 webpack-dev-server 启动的 ，所以不支持 域名访问 的 方式，可以通过 修改package.json 来配置一下， 如下图：
-
BUG： 拖动字母表整个页面往下动，解决方式如下 ：来阻止拖动事件的默认行为
 -
由于一些手机等级较低，不支持一些js的 新语法，会报错所以用 babel-polyfill 来解决js 的兼容问题