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