跨平台应用开发进阶(十九) :position:fixed 虚拟按键触发后无法生效问题解决

x33g5p2x  于2022-06-08 转载在 其他  
字(0.8k)|赞(0)|评价(0)|浏览(263)

一、前言

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位大咖的思考法则、工作方式、逻辑体系

相关文章