移动端底部fixed固定定位输入框ios下不兼容

it2022-06-09  82

简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的。

      尝试过网上说的很多方法,因为每个页面的需求和布局可能不相同,比如我做的需要下拉刷新消息,上拉加载更多,用的是minit-UI来做,所以都没有效果

后面无奈用了两套代码,用

var u = navigator.userAgent, app = navigator.appVersion;var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

判断是安卓还是ios,安卓的继续底部用固定定位,  ios底部也用固定定位,只是content内容主体部分用绝对定位

<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为回车键       //触发事件});

监听上面事件就发送消息,通过上面的处理亲测效果还不错,输入框能紧贴

另外这博客写的挺好的,可以参考https://blog.csdn.net/hahahhahahahha123456/article/details/82587621

转载于:https://www.cnblogs.com/yszblog/p/10370344.html


最新回复(0)