WEBAPP开发之Vue 移动端webApp填坑-职坐标

WEBAPP开发之Vue 移动端webApp填坑

白羽 2018-07-19 来源：网络阅读 2009 评论 0

摘要：本文将带你了解WEBAPP开发之Vue 移动端webApp填坑，希望本文对大家学WebApp有所帮助。

1.IOS滚动不平滑的问题

在移动端特别是iOS中，当滚动屏幕时会发现手指一拿开滚动就停止，这种用户体验效果很不好，有种给用户滚动卡顿的感觉。CSS3中的-webkit-overflow-scrolling属性可以完美的解决这个问题，该属性可控制元素在移动设备上是否使用滚动回弹效果

auto：使用普通滚动,当手指从触摸屏上移开，滚动会立即停止。

-webkit-overflow-scrolling:auto

touch：使用具有回弹效果的滚动,当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

-webkit-overflow-scrolling:touch

2.安卓输入框被键盘挡住问题

部分安卓机中输入框被被键盘遮挡住，以下这种解决办法，可以解决绝大数安卓机上面的问题

if(/Android/.test(navigator.appVersion)){
window.addEventListener("resize",function(){
if(document.activeElement.tagName=="INPUT"||document.activeElement.tagName=="TEXTAREA"){
document.activeElement.scrollIntoView();
}
})
}

3.移动端click点击清除300ms延迟
importFastClickfrom'fastclick'

window.addEventListener('load',()=>{
FastClick.attach(document.body)
})

另:一个不错的progress组件

在线演示文档跑马灯、进度条、step等级进度等
地址