uni-app
项目开发过程中,发现虚拟按键触发后导致按钮被顶起:
但是按钮设置的定位方式为固定定位。
.footer {
position: fixed;
width: 100%;
bottom: 0;
height: 120rpx;
justify-content: center;
align-items: center;
border-top: 1rpx solid #F0F0F0;
background: #ffffff;
}
原因待梳理。
解决思路如下:通过监听虚拟键盘的展示收起,动态控制按钮布局。
首先,初始化数据信息如下:
hideFlag: true,
hideClass: 'hide'
视图渲染部分,应用动态样式设置按钮布局:
<view class="footer" :class="hideFlag ? hideClass : ''">
<view @click="btnClick" class="btn" :class="{'btn-disable': btnDisabled}">提交</view>
</view>
虚拟按键监听逻辑如下:
onLoad() {
uni.onKeyboardHeightChange(res => {
// 虚拟按键隐藏
if (res.height === 0) {
this.hideFlag = true;
} else {
// 虚拟按键弹出
this.hideFlag = false;
}
})
},
CSS
样式如下:
.hide {
position: fixed;
bottom: 0;
}
开发者涨薪指南
48位大咖的思考法则、工作方式、逻辑体系
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://shq5785.blog.csdn.net/article/details/125164588
内容来源于网络,如有侵权,请联系作者删除!