移動端h5頁面常常會遇到軟鍵盤頂起底部fixed定位元素,體驗很差。記錄下uni-app下一樣的問題是如何解決的。html
解決思路:獲取窗口尺寸,監聽窗口尺寸變化,比較變化後窗口的尺寸和實際窗口尺寸的大小作相應處理。直接上代碼:
<!--html-->
<input type="text" @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar" placeholder=""/>ios
<view v-if="tabbar">底部懸浮</view>app
data(){
return{
tabbar: true,
windowHeight: ''
}
},
onLoad() {
uni.getSystemInfo({
success: (res)=> {
this.windowHeight = res.windowHeight;
}
});
uni.onWindowResize((res) => {
if(res.size.windowHeight < this.windowHeight){
this.tabbar = false
}else{
this.tabbar = true
}
})
},
methosd:{
showTabbar(){
this.tabbar = true;
},
hideTabbar(){
this.tabbar = false;
}
}ide
@click和@blur 分別解決安卓和ios 兼容問題
---------------------------------------------------------------------------------------------------------佈局
ps:能夠利用彈性佈局,中間flex爲1,底部按鈕固定高度。flex