Vue全家桶开发Android和IOS移动端应用常见问题解决
Posted A_山水子农
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue全家桶开发Android和IOS移动端应用常见问题解决相关的知识，希望对你有一定的参考价值。
1、input获取焦点弹出键盘时遮住input
web页面有多个input输入框时，底部的input获取焦点弹出键盘，会出现遮住input情况，用户输入的内容不能正常展示，需要手动上滑。如下图一键盘遮住了备注输入框，图二是处理后的效果，备注输入框自动上滑。
解决办法：使用相对定位relative和绝对定位absolute
<style>
.main
position: relative;
height: 100%;
width: 100%;
.section
position: absolute;
<style>
<body>
<div class="main">
<div class="section">
<input>
</div>
</div>
<body>
2、android手机fixed固定在底部的按钮被键盘往上移
在web页面中用position: fixed对按钮进行固定定位，Android输入框获取焦点弹出键盘会把按钮往上移，我们希望的结果是底部固定按钮不随着输入法而变动。 如下图一“提交”按钮随着键盘往上移，图二是处理后的效果，“提交”按钮自动隐藏。
解决办法： 监控屏幕大小的变化，当屏幕变小的时候让按钮隐藏起来，当屏幕大小与当前屏幕保持一致的时候，让按钮正常显示。
let H = window.innerHeight
window.addEventListener('resize', () =>
if (window.innerHeight < H)
this.showBtn = false
else
this.showBtn = true
)
3、Android和ios点击反应延迟
由于应用是web开发，不是原生的Android和iOS开发，需要对click事件有基本的了解，浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。所以Android和IOS点击后会有300ms延迟，反应迟钝降低了用户体验。为了能够立即响应用户的点击事件，可以使用fastClick。
npm install fastclick
在main.js中使用fastclick
import FastClick from 'fastclick'
if ('addEventListener' in document)
document.addEventListener('DOMContentLoaded', function ()
FastClick.attach(document.body)
, false)
4、IOS输入框点击获取焦点不灵敏
引入fastClick之后，IOS会产生输入框点击无法获取焦点问题，只有双击或者长按的时候才能使input输入框获取到焦点，解决方法是强制元素focus，即在改写的focus响应函数中直接触发元素的focus事件，在main.js中加入以下代码：
FastClick.prototype.focus = function(targetElement)
targetElement.focus();
;
以上是关于Vue全家桶开发Android和IOS移动端应用常见问题解决的主要内容，如果未能解决你的问题，请参考以下文章
实战Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目
谷歌技术团队出品，Android Flutter全家桶学习资料全新版