用簡單的布局搞定input框使用fixed下輸入的問題
最近在做移動(dòng)端H5聊天應(yīng)用發(fā)現(xiàn)慌盯，當(dāng)input框在最底部并且使用position:fixed 屬性的時(shí)候在蘋果手機(jī)中會(huì)出現(xiàn)不兼容的情況
大概布局就是上面是列表 底部是input并基于瀏覽器定位放置于最底部
當(dāng)點(diǎn)擊輸入框的時(shí)候會(huì)出現(xiàn)input位置錯(cuò)亂的情況
這里出現(xiàn)了上移的情況
這里出現(xiàn)了消失的情況征椒，得滑動(dòng)到最底下才會(huì)出現(xiàn)
在經(jīng)過一系列的面向百度編程后，各種監(jiān)聽input是否聚焦在寫相應(yīng)的事件再去對(duì)input做一些位置上的定義狱掂，我感覺好麻煩，也非常繁瑣，最后我實(shí)踐出一個(gè)相對(duì)比較完美的方案并且只用flex布局就可以輕松的實(shí)現(xiàn)
首先把頁面分割成兩個(gè)塊組成列表滾動(dòng)區(qū)和輸入?yún)^(qū)
首先把最外部的盒子設(shè)為flex 盒子并且縱向排列,高度設(shè)為100%旅急，就是和窗口一樣大小，高度獲取可以利用絕對(duì)定位或者給body設(shè)置100%高度繼承下來等等方法
.box{
display:flex;
flex-direction: column;
height:100%
}
這樣就縱向排列了牡整，把滾動(dòng)區(qū)的盒子自動(dòng)撐開就行了
.list{
flex: 1;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
}
底部設(shè)置高度
.foot{
width: 100%;
height: 100rpx;
background: #fff;
}
這樣就大功告成了目前項(xiàng)目運(yùn)行中藐吮，暫未發(fā)現(xiàn)bug，小伙伴可以自行體驗(yàn)下
最后打一波廣告：
CRMEB商城一個(gè)免費(fèi)開源項(xiàng)目
移動(dòng)端使用uni-app框架目前已經(jīng)適配公眾號(hào)果正、小程序炎码、app(暫未發(fā)布)
管理后臺(tái)使用vue+iview框架
開源不易，希望各位關(guān)注下秋泳，說不定你會(huì)有意外收獲潦闲！
