下面说一些我在写移动端项目时总结的经验：
- 我们知道移动端click点击事件有300s延迟，为了正常使用click，需引入
fastClick这个库
在main.js编写如下代码：
import fastClick from 'fastclick'
fastClick.attach(document.body)
- 低版本安卓浏览器打开一片白
import 'babel-polyfill'
- 轮播图、横向滑动tab、图片放大滑动等这些使用
vue-awesome-swiper插件
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
具体使用场景需参照文档配置option选项，这里不再赘述。
下面只阐述一点就是我们在使用插件时常常需要更改样式，比如改变轮播图下面小圆点的颜色。这里我们推荐使用样式穿透：
/deep/是sass和less的样式穿透
>>>是stylus的样式穿透
.wrapper >>> .swiper-pagination-bullet-active
background: #fff
.wrapper /deep/ .swiper-pagination-bullet-active {
background: #fff
}
- 当我们要引入不是其本文件跟目录下的 css 文件时，记得使用
'~@文件名'来简化'./../../....'这些相对路径。或者使用'~路径别名'
@import './../../../assets/css/mixin.scss';
//简化成功
@import '~@/assets/css/mixin.scss';
@import '~styles/varibles.scss'
- css常用相同模块内容可以提mixin提供多处使用，如：
@mixin omit {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
然后通过@include来调用具有相同名称的mixin模块
div {
@include omit;
}
- 在css里面，
padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度.这个小技巧好处有很多：
- 可以进行提前占位，避免资源加载时候的闪烁
- 还可以让高度自适应
在移动端或者在响应式开发情况下，我们可以利用这个特性来实现图片等比例缩放自适应。
解决核心思想为：提供一个容器，设置容器的高度为0，再设置padding-bottom为56.25%（需要自适应的元素高度除以宽度*100%）（因为padding的百分比是按照容器宽度计算的，所以由padding来撑开容器高度，而不是height，保证了容器的宽高比例）
<div class="wrapper">
<img class="swiper-img" />
</div>
.wrapper {
overflow: hidden
width: 100%
height: 0
padding-bottom: 31.25%
}
.swiper-img {
width: 100%
}
- 移动端页面当滑动到底部时，路由跳转后发现页面还是保持在底部，这里可以在router中配置
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
- 项目打包后，manifest.js可以理解为webpack打包生成的配置文件， vendor.js各个页面各个组件公用的一些代码，app.js放的是项目各个页面的业务逻辑代码。app.js至少超过1M的时候才使用异步组件
-
使用keep-alive时有两个钩子函数:
877cd98ea39d2dcdce0918a0d9073d6.png
mounted () {
this.lastCity = this.city
this.getHomeInfo() //ajax请求
},
activated () {
if (this.lastCity !== this.city) {
this.lastCity = this.city
this.getHomeInfo()
}
}
- 有一个移动端很常见的效果，当滑动右边部分的时候，左边会联动显示与当前内容相符合的标题高亮，当点击左边某一个标题的时候，右边会自动滑动到相应的内容。左右联动效果，可以通过
better-scroll这个插件实现。另外，横向滚动的导航栏、竖向滚动的列表都可以通过这个插件来实现。
<template>
<!--定义外层-->
<div class="wrapper" ref="wrapper">
<!--定义需要滚动的内容区域-->
<ul class="content">
<li v-for="item in items">{{item.text}}</li>
</ul>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
mounted() {
this.$nextTick(() => {
this.scroll = new Bscroll(this.$refs.wrapper, {})
})
},
watch: {
letter () {
if (this.letter) {
const element = this.$refs[this.letter][0]
this.scroll.scrollToElement(element)
}
}
},
}
</script>
样式这里需要注意的是，要滚动的这一部分给了固定的高度，且超出部分overflow:hidden;
.wrapper {
overflow: hidden
position: absolute
top: 1.58rem
left: 0
right: 0
bottom: 0
}
另外附上better-scroll原作者的文章：https://www.imooc.com/article/18232
- 我们做好的项目，如何在移动端进行调试呢？
我们发现，vue项目是用webpack-dev-server这个服务器跑起来的，这个服务器默认外部是无法访问的，需在package.json中加入--host 0.0.0.0才行：
更改后的配置如下：
"scripts": {
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
},
这样的话，在命令行运行ipconfig，手机和电脑连接同一局域网，用手机访问电脑的ip地址就可以用真机打开啦
网友评论