微信公众号开发input常见问题

一、ios端上下滑动时卡顿，页面缺失

 

在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后，卡顿导致如左图下面部分丢失。

原因：

笼统说微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。

*{ -webkit-overflow-scrolling: touch;}

二、ios键盘唤起后收起页面不归位

输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑

原因：固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件

<input @blur.prevent="changeBlur()" />   //input标签中加上以下代码：

changeBlur(){
let u = navigator.userAgent,
 app = navigator.appVersion;
 let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
 if(isIOS){
 setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 window.scrollTo(0, Math.max(scrollHeight - 1, 0))
 },
 200) } }<br>

…………