那些app提供位置服务器,仿写去哪儿app项目和详细总结

image.png

image.png

image.png

image.png

image.png

image.png

具体的话你们可以下载我的项目参考一下,有一些特效也可以自己改进。

接下来我要开始总结我所做的去哪儿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">