簡短記錄下最近開發移動端項目碰到的小坑,產品需求作一個售後對話頁面,底部固定輸入框,和微信對話差很少,可是在ios下,fixed失效,輸入框被虛擬鍵盤擋住,在安卓下是正常的。ios
嘗試過網上說的不少方法,由於每一個頁面的需求和佈局可能不相同,好比我作的須要下拉刷新消息,上拉加載更多,用的是minit-UI來作,因此都沒有效果web
後面無奈用了兩套代碼,用微信
var u = navigator.userAgent, app = navigator.appVersion;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
判斷是安卓仍是ios,安卓的繼續底部用固定定位, ios底部也用固定定位,只是content內容主體部分用絕對定位app
<div :class="isIOS?'input-bottom1':'input-bottom'">
<form style="width:70%;">
<input class="message-input" @focus="iosScrollT" @blur="iosScrollB" type="text" v-model="sendMess" >
</form>
<div class="footer-r" @click="postAdvisory">發送</div>
</div>
<div class="content" v-if="IOSis">
<div :style="mHeight">
<div class="service-list" v-for="(item,index) in infoList">
<div class="service-item" v-if="item.is_admin==1">
<i class="iconfont icon-kefuzixunhui"></i>
<div class="border-left-empty"></div>
<div class="message">{{item.content}}</div>
</div>
<div class="service-item1" v-else>
<div class="message1">{{item.content}}</div>
<div class="border-right-empty"></div>
<img :src="userImg"/>
</div>
</div>
</div>
<div ref="msg_end" style="height:40px;"></div>
</div>
.input-bottom1{
position: fixed;
bottom: 60px;
left: 0px;
width: 100%;
border-top: 1px solid #ccc;
background-color: #fff;
z-index: 9998 !important;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content:space-between;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
padding: 10px 0;
background-color:#f5f5f7;
border-top:2px solid #dddddf;/*no*/
}
.content{
position: absolute;
top: 50px;
left: 0px;
right: 0px;
bottom: 50px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
如此,虛擬鍵盤沒有擋住底部的輸入框了,可是輸入框聚焦光標的時候仍是被擋住了一部分,因此又用了@focus="" @blur=""監聽輸入框光標,改變bottom值:position: fixed;bottom: 60px;,輸入框失焦又改爲bottom: 0px;
還有用minit-UI來作下拉刷新消息,上拉加載更多不能兼容,因此ios端只能一次把消息加載完,而後進到頁面時,頁面自動滑動到最底部,從而能夠查看到最新消息,因此就用了.scrollIntoView()
that.$refs.msg_end.scrollIntoView();
可是還有一個問題,點擊底部自定義的發送按鈕沒有用,硬要點完成,把虛擬鍵盤放下去後,再點發送按鈕才能把消息發送出去,因此只能監聽輸入框光標離開或虛擬鍵盤的動做
document.body.addEventListener('focusout', () => {
//軟鍵盤收起的事件處理
})
$("#keyword").on('keypress', function(e) { //#keyword爲input文本框
var keycode = e.keyCode;
var searchName = $(this).val();
if(keycode == '13') {//13爲回車鍵
//觸發事件
});佈局
監聽上面事件就發送消息,經過上面的處理親測效果還不錯,輸入框能緊貼post
另外這博客寫的挺好的,能夠參考https://blog.csdn.net/hahahhahahahha123456/article/details/82587621flex