1、问题:安卓手机点击input框,会被键盘挡住
解决方案:写个js即可
// 处理安卓手机输入法遮挡输入框问题
if ((/Android/gi).test(navigator.userAgent)) {
window.addEventListener('resize', function () {
if (document.activeElement.tagName == 'INPUT' ||
document.activeElement.tagName == 'TEXTAREA') {
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
});
}
最终效果:
安卓手机点击输入框时,会判断该输入框是否在可视区域,不在时会自动置于可视区域。
苹果手机点击输入框时,不管该输入框是否在可视区域,都会将输入框置于可视区域最中间。
2、问题:单页面开发跳转页面后页面还停留在前一个页面的位置,不会自动回到顶部
解决方案:在路由钩子router.afterEach方法中加入一行代码:
document.body.scrollTop = document.documentElement.scrollTop = 0;
最终效果:
每次跳转页面之后页面的滚动距离都重置为0,页面就能回到顶部。