Vue移动端坑点

1、mint-ui的loadingmore上下拉刷新加载组件会出现无法下拉的情况,解决办法给父级加上:
overflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */

2、Vue+Vux结合按需引入需要注意Vux的版本问题,还有vux-loader的配置问题。Vux的XButton组件绑定click事件写法:@click.native
3、css部分flex部分手机会出现不兼容的情况,可以采用position定位加上百分比(当然你也可以去专研适配的兼容写法)解决,另一种情况是写了内嵌样式,这样我们的autofix将无法对这个css样式增加浏览器头。
4、vue移动端测试服务器域名增加二级目录的解决方案,理论上是更改config中的index的build部分,

assetsPublicPath'/二级目录/'此代码端在maclunixok,但是在windows情况会出问题,可采用'./'当前域结合对dist的静态资源目录的更改问题解决

5、sass使用koala第一次编译不出来可以使用命令行编译,然后再用koala修改编译路径

1、sass style.scss style.css
2、设置输出路径再编译

6、外部字体引入带来的问题,外部字体引入方案可自行百度,如果两个字体大小样式不一会出现资源加载的问题,资源加载速度不一样将会导致你的网页部分字体慢的出现字体闪烁,npm中也有字体压缩的包,但是不适用于webpack,列如本次遇到的苹方两种字体
7、vue中数据闪烁的问题主要是数据渲染和数据值及dom样式的冲突逻辑问题,可使用v-clock解决
8、解决移动端点击延迟的问题可采用vux的fastclick,在main.js里引用fastclick

const FastClick = require('fastclick')
FastClick.attach(document.body)

9、关于vux的vux-loader安装不成功,推荐一个傻瓜式的操作,用vue-cli初始化一个vux的项目,拷贝webpack-base配置和packjson合并操作就ok
10、-webkit-tap-highlight-color可以取消点击高亮。
11、vue中的属性直接绑定boolean和number,

label='1';//这部分代码将会报错,如果我们label属性默认是number,他会报 Invalid prop: type check failed for prop "labek". Expected Number, got String.即期待值为number确得到string,ts中的类型声明可以也是这样的概念
:label='1';//这样直接写就是ok的

你可能感兴趣的:(前端)