我的代码地址：https://gitee.com/Zl190/Travel
效果图：
具体的话你们可以下载我的项目参考一下,有一些特效也可以自己改进。
接下来我要开始总结我所做的去哪儿app的一些心得了。
1.移动端开发中的1px边框问题，由于在不同屏幕上，可能会使得1px实际在移动端显示不是1px,怎么解决?
解决：通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。
2.移动端click事件延迟300ms的解决方法？
先在终端下载fastclick
cnpm install fastclick --save
然后在main.js里面引入
import fastClick from 'fastclick'
使用fastClick
fastClick.attach(document.body)
3. scoped限制该vue文件下的css仅在该.vue文件下使用。
4. stylus样式的应用：
下载stylus
cnpm install stylus --save
cnpm install stylus-loader --save
使用
stylus使用变量的话可以在src下面的assets新建个文件夹css，然后建个 varibles.styl来存放要使用的一些变量.
最后在标签内引入
@import '../../../assets/css/varibles.styl'
这样就可以使用那些变量了。
5.简化路径
@在路径中指的是src目录，即@/assets/css/reset.css,注意，在css样式中引入其他css目录时，需要写成~@/assets/css/reset.css。
简化路径，为常用路径简化别名，如src/common可简化为common/：
步骤：在build下webpack.base.conf.js文件下
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'), //@这是src目录的别名
'common':resolve('src/common') //这是src/common的别名，从而用common替代src/common路径达到简化效果
}
}
6. iconfont字体图标的应用：
6.1 在iconfont注册账号，建立一个项目，然后将需要的图标加入到该项目下，下载到本地电脑该项目文件夹下src->assets->iconfont中。
6.2 在iconfont.css的url中修改字体在本地的路径，在main.js中直接引入该文件import ".import './assets/css/iconfont.css'"。
6.3 即可显示该图标字体。
7.解决网速过慢获取资源页面抖动问题
设置元素的宽高比例固定就行了
.swiper
overflow : hidden
width :100%
height :0
padding-bottom :31.25%//即高始终为宽的31.25%
8.scoped穿透
如果我们给样式设置了scoped，这个时候组件里面的样式既不能影响外部样式，也不能比外部样式所影响。
.swiper >>> .swiper-pagination-bullet-active
background-color :#fff
9.vue-awersome-swipper数据加载后直接显示最后一页问题。
解决:使用axios获取数据传递给轮播组件以后直接显示了最后一页，此时可以使用v-if通过判断数组长度返回的是true还是false
showimg(){
return this.swiperList.length
}
这样这个问题就解决了。
10.vue-awesome-swiper轮播插件的应用：
1.在main.js中引入全局插件：
npm install vue-awesome-swiper@2.6.7 --save
import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/dist/css/swiper.css"
Vue.use(VueAwesomeSwiper)
2.
![]()
swipperDOM结构变化导致的滚动问题
如果我们插入swipper中的DOM有所变化，那么滚动效果就会变得非常的差，这个时候我们可以设置他的swipperOptions里面的observeParents以及observer
data () {
return {
swiperOption: {
pagination : '.swiper-pagination',
paginationType : 'fraction',
observer:true,
observeParents:true,
}
}
}
11.跨平台的axios的使用：实现跨平台的请求
10.1 npm install axios --save //或者
10.2 import axios from "axios"
10.3 methods:{ //通过.json文件模拟后端接受的数据，将index.json文件放在static里面
getHomeInfo(){
axios.get("./static/mock/index.json").then(this.getHomeInfoSucc)
},
getHomeInfoSucc(res){
console.log(res)
}
}
12.在config>index.js里面 做如下设置，则可以实现通过调用api/index.json接口时，自动转到本地static/mock/index.json文件
proxyTable: {
"/api":{
target:"http://location:8098",
pathRewrite:{
"^/api":"/static/mock"
}
}
}
13. Bscroll使用方法：
1. npm下载better-scroll：npm install better-scroll --save;
2. 引入better-scroll：import Bscroll from "better-scroll";
3. 定义标签dom: < div ref="wrapper">