vue全家桶做的一个web版旅游app


css辅助工具依赖包stylus

1
2
npm install stylus --save
npm install stylus-loader --save

首页轮播=第三方插件vue-awesome-swiper,2.6.7稳定版

1
npm install vue-awesome-swiper@2.6.7 --save

axios

1
npm install axios --save

Better-scroll滚屏

1
2
3
4
5
npm install better-scroll --save

if(this.latter){
    this.scroll.scrollToElement()
}

手指滑动事件

1
2
3
4
5
6
7
8
9
10
touchstart
touchmove
touchend

函数节流，限制执行效率touchmove执行效率过高了
ref="xxx"
import bscroll from 'better-scroll'
mounted(){
	this.bscroll=new bscroll(this.$refs.xxx)
}

解决的一些问题:

pagination分页

移步swiper中文网

1
2
3
4
解决swiper加载之前，gallary组件先渲染导致banner的时候出现bug的问题
搜observeParents以及observer意思是当父组件dom刷新的时候，swiper重新刷新一次
observeParents:true
observer：true

对全局事件的解绑

由于使用了keep-alive产生的生命周期钩子activated，绑定的事件处理函数是

1
window.addEventListener('scroll', this.handelScroll)

因为绑定的是window对象，这样不光本页滚动会触发该事件处理函数，回到主页也会触发该事件处理函数，所以是默默的写了一个影响引擎的错误。
全局解绑就是deactivated，在上面那个方法后面加上这个方法

1
window.removeEventListener('scroll', this.handelScroll)

它会在页面重新加载的时候重新加载事件处理函数

APP.vue对路由下的组件避免缓存

可以加上exclude，对其中的某个组件进行避免缓存，这样其mounted方法就不会一直缓存在同一个状态，导致路由跳转的状态不变从而axios获取数据的时候key值不被改变

1
2
3
4
5
6
7
<template>
  <div id="app">
  	<keep-alive exclude="detail">
      <router-view/>
	</keep-alive>
  </div>
</template>

移动端使用click会延迟300毫秒之后才执行

解决：引入faserclick

1
npm install fastclick --save

把这个包安装到项目依赖，因为线上线下都要用就–save保存到package.json
项目入口文件里

1
2
import FastClick from 'fastclick'
FastClick.attach(document.body)

git push之后的这个问题

1
....... ....  hhardyy/Travel (master|MERGING)

原因是可能同时上传了更新的文件导致冲突，这时候可以查看一下工作目录里面“README.md”文件的内容：

1
2
3
4
5
<<<<<<< HEAD  
这是第二个人提交的......................  
=======  
这是第一个人提交的  
>>>>>>> origin/master

这时候git status查看哪个文件有报错，去到那个文件里面把多余的类似于>>> head的代码干掉，重新add .然后提交就ok了

阻止页面默认行为

1
2
3
修复bug：在城市选择选择页从字母上滚动的时候屏幕默认会跟着上下移动，需要的效果是手指从字母上移动的时候根据移动到的字母左边显示出相应字母开头拼音的城市
@touchstart.prevent="handelTouchStart"
.prevent=事件修饰符，可以阻止页面默认行为

真机测试的时候有些浏览器默认不支持promise

1
2
安装这个依赖
npm install babel-polyfill --save

它会判断浏览器如果没有promise，会自动增加这个es6的新特性
进入入口文件main.js里头import ‘babel-polyfill’在所有浏览器上就都支持promise了，以及解决部分白屏问题。
项目地址