[VUE]H5页面在ios与android的差异性笔记
in 前端 with 0 comment

[VUE]H5页面在ios与android的差异性笔记

in 前端 with 0 comment

input框样式差异

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

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

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

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

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

微信图片_20210510134532.jpg

解决办法:

给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,或者参考官方的滚动行为

方法一:

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

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

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

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

<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的随机图片服务。

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

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

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

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

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

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

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

参考文档

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

Comments are closed.