Uniapp(H5)判断软键盘是否唤起、关闭事件
2023-09-14 09:04:08 时间
记录一下每次因为软键盘弹起,而导致我们写的代码样式变形,或者出现一些其它的BUG性问题,此时都要根据是否软键盘弹出,去做相对应的判断,此篇文章就是判断软键盘是否弹起的一些代码记录,好了接下来进入正题
1.先在data定义我们需要的参数
defaultPhoneHeight:'', //屏幕默认高度
nowPhoneHeight:'', //屏幕现在的高度
2.在生命周期mounted做以下操作
//监听软键盘获取当前屏幕高度的事件
this.defaultPhoneHeight = window.innerHeight
window.onresize = ()=>{
this.nowPhoneHeight = window.innerHeight
}
补充一点知识:
innerHeight 返回窗口的文档显示区的高度,如果有垂直滚动条,也包括滚动条高度。
innerWidth 返回窗口的文档显示区的宽度,如果有水平滚动条,也包括滚动条高度。
innerWidth 和 innerHeight 是只读属性。
注意:使用 outerWidth 和 outerHeight 属性获取浏览器窗口的宽度与高度。
window.onresize 事件会在窗口或框架被调整大小时发生。
3.此时我们可以用watch监测nowPhoneHeight的变化,从而进行软键盘唤起和关闭的操作
//软键盘弹起事件
nowPhoneHeight(){
if(this.defaultPhoneHeight != this.nowPhoneHeight){
//手机键盘被唤起了。
//写软键盘唤起你需要做的操作
//如this.tabbar = true
}else{
//手机键盘被关闭了。
//写软键盘关闭你需要做的操作
//如this.tabbar = false
}
}
4.整体代码
<template>
<view class="content">
<!-- 登录按钮 -->
<view class="login" @click="onLogin" v-show="show">登录</view>
</view>
</template>
<script>
export default {
data() {
return {
defaultPhoneHeight: '', //屏幕默认高度
nowPhoneHeight: '', //屏幕现在的高度
show:true
}
},
mounted() {
//监听软键盘获取当前屏幕高度的事件
this.defaultPhoneHeight = window.innerHeight
window.onresize = () => {
this.nowPhoneHeight = window.innerHeight
}
},
watch:{
//软键盘弹起事件
nowPhoneHeight(){
if(this.defaultPhoneHeight != this.nowPhoneHeight){
//手机键盘被唤起了。
this.show = false
}else{
//手机键盘被关闭了。
this.show = true
}
}
},
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.login {
position: fixed;
bottom: 100rpx;
left: 6%;
width: 88%;
height: 100rpx;
line-height: 100rpx;
text-align: center;
background: #6C8FF8;
box-shadow: 0px 0px 24rpx 0px rgba(202, 202, 202, 0.41);
border-radius: 30rpx;
font-size: 32rpx;
font-weight: bold;
color: #FFFFFF;
}
</style>
5.转载
原文链接:https://blog.csdn.net/weixin_42125732/article/details/120763422
相关文章
- H5进阶篇--实现微信摇一摇功能
- 移动端H5页面中1px边框的几种解决方法
- h5转pb的两个坑
- 慕课网H5圣诞主题
- H5单页面架构:backbone + requirejs + zepto + underscore
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案-Onvif(二)使用Onvif协议进行设备RTSP地址获取
- 基于EasyDarwin开源流媒体服务器框架实现EasyNVR H5无插件直播流媒体服务器方案
- EasyNVR H5无插件RTSP直播方案在Windows server 2012上修复无法定位GetNumaNodeProcessorMaskEx的问题
- Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net
- 成功解决type object ‘h5py.h5.H5PYConfig‘ has no attribute ‘__reduce_cython__‘
- CV之IG之DCGAN:基于keras框架利用深度卷积对抗网络DCGAN算法对MNIST数据集实现图像生成(保存h5模型→加载模型)案例应用
- CV之IC之AlexNet:基于Keras框架利用卷积神经网络类AlexNet算法实现猫狗分类识别(图片数据增强→保存h5模型→加载模型)案例应用
- [h5棋牌项目]-02-找出数组中不重复的数
- 面试百问:H5性能测试如何做?