VUE_H5页面在ios与android的差异性笔记

input框样式差异

在ios中设置input的height/line-height样式会导致两端样式不一致。

解决方法：通过padding来撑开边距，弃用input的height/line-height。

注：如果在同行中还需要垂直居中，可以通过flex的align-items:center来实现。

ios input属性为display:block;width:100%时，宽度超过父元素宽度的解决办法

如图：红色区域为父元素，绿色为撑破父元素的Input。

解决办法：

给Input元素加上box-sizing: border-box;

new Date(‘xxxx-xx-xx xx:xx:xx’)在IOS上显示NaN

xxxx-xx-xx xx:xx:xx格式只支持Android,在Ios下有问题

解决方法：改成 2018/11/30 18:00:00 这样的格式就能兼容双端

vue router切换页面时 scroll未滚动到顶部

解决方法：在beforeEach事件中设置scrollTop，或者参考官方的滚动行为

方法一：

1
2
3
4

router.beforeEach((to, from, next) => {
    window.scrollTo(0, 0)
    next()
})

方法二：
参考 滚动行为 这一条

vue router切换页面时，卡顿8-30s才跳转到页面

这个问题让我感觉很疑惑，我只是写了一个card组件（并没有任何接口请求）然后重复渲染了20次而已。

1

<card-foo v-for="(num, index) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]" :key="index"></card-foo>

参考了网上的一些帖子，他们大致的原因有这几种：

1. 在destroyed时有大量消耗计算/重置的数据，导致周期增加
2. 组件结构过于复杂，渲染慢
3. 路由懒加载的文件过多

但这些都不是我这个问题的原因，我的问题竟然是因为一个随机图片URL加载过慢导致的

因为在写页面的时候需要一些图片来占位辅助我写css样式，于是我引用了unsplash的随机图片服务。

1

<img src="https://source.unsplash.com/random" alt="">

但没想到引用了这个国外网址之后，图片加载过慢导致router切换也出现了问题。

VUE 移动端获取和设置scrollTop无效的问题

使用document.documentElement.scrollTop获取top时始终为0，改成下面的写法就能获取到数据了：

1

const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset

使用document.documentElement.scrollTop = 0赋值时有时候也会发现无效，我现在的做法是两个都写了：

1
2

document.documentElement.scrollTop = 0 // PC端有效
document.body.scrollTop = 0 // 移动端有效

参考文档

ios下input框光标得高度问题
new Date()在IOS上的兼容问题