移动端h5页面经常会遇到软键盘顶起底部fixed定位元素,体验不好。记录下uni-app下同样的问题是如何解决的。
解决思路:获取窗口尺寸,监听窗口尺寸变化,比较变化后窗口的尺寸和实际窗口尺寸的大小做相应处理。直接上代码:
<!--html-->
<input type="text" @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar" placeholder=""/>
<view v-if="tabbar">底部悬浮</view>
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;
}
}
@click和@blur 分别解决安卓和ios 兼容问题
---------------------------------------------------------------------------------------------------------
ps:可以利用弹性布局,中间flex为1,底部按钮固定高度。
原文地址:https://www.cnblogs.com/zjy850984598/p/10638486.html