input,fixed在iOS坑点太多,不一一赘述,google有太多的demo可借鉴html
昨天遇到个bug,输入框把底部弹出以后,收回时背景没有收回;ios
bug机型:iphone6,iphone6s (没有别的测试机,哭穷昂~)git
以下图所示:github
解决方案: 监听input的bulr事件,而后重置body的scrollTop;web
<input @blur="inputBlur" type="text" v-model="phone" placeholder="输入手机号">
复制代码
inputBlur() {
if(is_weixin() && getDevice().model == 'iPhone') {
setTimeout(() => {
document.body.scrollTop = 0;
}, 200)
}
}
复制代码
另外推荐个很好用的,微信调试工具:vconsolebash
html文件中引入能够直接使用。微信
<script src="https://s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>
复制代码
小记:这算是我写的第一篇文章吧,文笔很差,markdown也不熟练,又不善于表达,遇到问题一直baidu or google,昨天遇到这个问题,查了不少资料都没有相关,后来静下来慢慢调试找出来,ios的键盘弹出不会触发window的resize事件,可是会有focus和bulr的事件,bulr以后body的滚动条没有重置,只好手动重置了,有时间在补充fixed,input在移动端的问题吧。markdown
ps:有问题的话谢谢各位大佬指正。iphone