vue嵌套H5到APP，安卓键盘顶起页面内容错乱解决方案

于 2024-06-20 10:18:00 发布
阅读量499 收藏 1
点赞数 7
文章标签： vue.js android 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44705979/article/details/139824421
版权

1.h5嵌套到APP，input输入框页面被键盘顶起错乱
2.解决方案：不能使用定位，使用margin-top
3.如果想满屏兼容比如登陆页面 按钮在下面 不允许出现滚动则则需要手动计算margin-top的高度
4.需求 ：登陆页面内嵌H5，兼容各个类型的手机不允许出现滑动，满屏展示

<template>
	<view class="box" :style="minHeight">
		<view @click="goBack">
			<u-icon name="close" size="32"></u-icon>
		</view>
		<view class="bolid-text">注册CCAPP账号</view>
		<view class="think-text">推荐使用手机验证码登录</view>
		<view class="phone-text">手机号</view>
		<view class="input-sty">
			<u-input v-model="user.phoneNo" type="number" border="none" placeholder="请输入手机号" />
		</view>
		<view class="valide-text">短信验证码</view>
		<view class="input-sty">
			<view style="width: 80%;">
				<u-input v-model="user.verifyCode" type="number" border="none" maxlength="6" placeholder="请输入验证码" />
			</view>
			<view>
				<tui-countdown-verify :seconds="90" :successVal="successVal" @send="send" :params="1" radius="70rpx"
					borderColor="#05CBA3" color="#05CBA3" :resetVal="resetVal">
				</tui-countdown-verify>
			</view>
		</view>
		<view class="shop" v-show="chanelFlag">
			渠道门店：{{channelName}}
		</view>
		<view class="registersIos" :style="{backgroundColor: text =='注册' ? '#04CBA3' :'#696969 ',marginTop: minHeight}" @click="goSubmit">
			{{text}}
		</view>
		<view class="xieyiIos">
			继续即表示您同意 <text style="color: #05CBA3;margin: 0 10rpx;text-decoration: underline;" @click="goProtocol">
				用户协议</text> 和 <text style="color: #05CBA3;margin: 0 10rpx;text-decoration: underline;"
				@click="goPrivacy">隐私条款</text>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	// let wx1 = require("../../static/jweixin-1.6.0")
	import {
		ajax
	} from '@/ajax.js';
	import {
		setPageMinHeight
	} from '@/fn.js'
	import tuiCountdownVerify from "@/components/tui-countdown-verify.vue";
	import {
		loading,
		hideLoading,
	} from "@/fn.js";
	export default {
		components: {
			tuiCountdownVerify,

		},
		data() {
			return {
				uid: "",
				value: '',
				successVal: 0,
				iswx: false,
				resetVal: 0,
				channelName: '',
				text: '注册',
				user: {
					phoneNo: '',
					verifyCode: '',
					sharePhoneNo: '',
				},
				chanelFlag: false,
				system:'',
				minHeight:0
			}
		},
		mounted() {
			this.minHeight = uni.getSystemInfoSync().windowHeight - 350 + 'rpx' // 重要代码！！！计算出注册按钮到上个盒子的margin-top距离
			console.log(this.minHeight)
		},
		onLoad(e) {
			if (e.uid) {
				this.uid = e.uid
			}
			this.system = this.detectOS()
			console.log(this.system)
			if (e.sharePhoneNo) {
				uni.setStorageSync('sharePhoneNo', e.sharePhoneNo) //分享者的手机号码
			}
			// this.getChannel()
			if (uni.getStorageSync('sharePhoneNo')) {
				this.getChannel()
				this.chanelFlag = true;
			}
			let ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				this.iswx = true;
			}
		},

		onReady() {
			this.refCode = this.$refs.uCode;
		},
		methods: {
			/*用户协议*/
			goProtocol() {
				uni.navigateTo({
					url: '/pages/agreement/agreement'
				})
			},
			/*隐私政策*/
			goPrivacy() {
				uni.navigateTo({
					url: '/pages/agreement/clause'
				})
			},
			/*返回上一级别*/
			goBack() {
				uni.navigateBack(1)
			},
			/*获取渠道*/
			getChannel() {
				let that = this;
				ajax("get", '/health/channel/getBySharePhoneNo/' + uni.getStorageSync('sharePhoneNo')).then(res => {
					console.log('cc')
					console.log(res)
					console.log(res.hasOwnProperty("data"))
					console.log('cc')
					
					if(res.hasOwnProperty("data")){
						that.channelName = res.data.channelName
					}else{
						that.channelName = uni.getStorageSync('sharePhoneNo')
					}
				})
			},
			handleLaunchFn(e) {
				alert('success', e)
			},
			handleErrorFn(e) {
				alert('fail', e);
			},
			handleReadyFn(e) {
				alert('fail', e);
			},
			openMini() {
				loading()
				ajax('get', '/applet/nav/toApplet/' + this.uid).then(res => {
					hideLoading()
					let cData = JSON.parse(res.msg)
					location.href = cData.openlink
				});
			},
			/*发送验证码*/
			send() {
				let that = this;
				let reg = /^1[3456789]\d{9}$/;
				if (this.user.phoneNo == '') {
					this.resetVal++;
					this.$refs.uToast.show({
						message: '请输入手机号码',
						duration: 500
					})
					return false;
				}
				if (!reg.test(this.user.phoneNo)) {
					this.resetVal++;
					this.$refs.uToast.show({
						message: '手机号码不正确',
						duration: 500
					})
					return false;
				}
				// that.$u.api.getCode({
				// 	data: {
				// 		user: {
				// 			mobile: that.user.mobile
				// 		}
				// 	}
				// }).then(res => {
				// 	that.successVal++;
				// 	that.$refs.uToast.show({
				// 		message: '验证码已发送',
				// 	})
				// }).catch(err => {
				// 	that.resetVal++;
				// })
				ajax("get", "/health/user/getVerifyCode", {
					phoneNo: that.user.phoneNo
				}).then(res => {
					that.successVal++;
					that.$refs.uToast.show({
						message: '验证码已发送',
					})
				})
			},
			/*注册*/
			goSubmit() {
				let that = this;
				that.user.sharePhoneNo = uni.getStorageSync('sharePhoneNo')
				if (that.text == '注册') {
					ajax("post", "/health/user/login", that.user).then(res => {
						that.successVal++;
						that.$refs.uToast.show({
							message: '注册成功',
						})
						if (that.iswx) {
							let timer = setTimeout(() => {
								clearTimeout(timer)
								let timer = null;
								uni.navigateTo({
									url: '/pages/browser/index?sharePhoneNo='+ that.user.sharePhoneNo
								})
							}, 1000)
						} else {
							uni.navigateTo({
								url: '/pages/loadapp/loadapp?type=a&sharePhoneNo=' + that.user.sharePhoneNo
							})
						}
					}).then(res => {
						that.text = '注册成功'
					})
				} else {
					uni.navigateTo({
						url: '/pages/browser/index?sharePhoneNo='+ that.user.sharePhoneNo
					})
				}
			},
			/*判断页面是ios还是安卓*/
			detectOS() {
				var userAgent = navigator.userAgent || navigator.vendor || window.opera;

				// 检测iOS设备
				if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
					return 'iOS';
				}
				// 检测Android设备
				if (/Android/.test(userAgent)) {
					return 'Android';
				}
				// 如果不是iOS或Android，则返回其他
				return 'Other';
			},
		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		padding-top: 80rpx;
		padding-left: 76rpx;
		padding-right: 76rpx;
		box-sizing: border-box;
		height: 100vh;
		position: relative;
		/* overflow-y: scroll */
	}

	.bolid-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 800;
		font-size: 48rpx;
		color: #000000;
		margin-top: 74rpx;
	}

	.think-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #B6B6B6;
		margin-top: 12rpx;
	}

	.phone-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 800;
		font-size: 32rpx;
		color: #000000;
		margin-top: 86rpx;
	}

	.valide-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 800;
		font-size: 32rpx;
		color: #000000;
		margin-top: 52rpx;
	}

	.input-sty {
		border-bottom: 2rpx solid #E6E6E6;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		padding-bottom: 16rpx;
	}

	.u-input {
		padding: 12rpx 0 !important;
	}

	.shop {
		box-sizing: border-box;
		margin-top: 62rpx;
		height: 96rpx;
		border-radius: 12rpx;
		border: 2rpx solid #04CBA3;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #04CBA3;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		word-break:break-all;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		background-color: #E5FAF5;
		position: absolute;
		top: 725rpx;
		left: 76rpx;
	}

	.registersAndro {
		width: 60%;
		height: 88rpx;
		border-radius: 12rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx
	}
	
	.registersIos{
		width: 60%;
		height: 88rpx;
		border-radius: 12rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		/* margin-top: calc(100vh - 1000rpx); */
	}
	
	.xieyiAndro {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #919191;
		margin: 40rpx auto 0;
		text-align: center;
	}
	.xieyiIos{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #919191;
		text-align: center;
		width: 100%;
		margin-top: 52rpx;
	}
</style>
大力水手~
关注
  • 7
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Android软键盘弹出覆盖h5页面输入框问题
08-27
之前我们在使用vue进行 h5 表单录入的过程中，遇到了Android软键盘弹出，覆盖 h5页面 输入框 问题，在此进行回顾并分享给大家,感兴趣的朋友跟随脚本之家小编一起学习吧
解决安卓嵌套H5软键盘遮挡问题以及导航栏遮挡问题
11-15
解决安卓嵌套H5，软键盘遮挡输入框以及页面被华为、小米等底部导航栏遮挡问题
记录：vue H5安卓手机键盘弹出,页面底部被顶起问题
qq_48045360的博客
08-25 797
记录：vue H5安卓手机键盘弹出,页面底部被顶起问题
如何解决H5页面底部按钮使用fixed布局的时候被输入法顶上来的问题
泥鸽鸽的博客
11-20 2125
如何解决H5页面底部按钮使用fixed布局的时候被输入法顶上来的问题目前H5 做手机端越来越流行 这段时间在开发手机端h5页面的时候就遇到一个问题 当在真机上测试的时候 底部使用固定定位的按钮被输入法弹框顶起来 这该如何解决呢？这个问题目前发现是部分安卓机上存在 解决思路有两个方案1：隐藏按钮 目前H5 做手机端越来越流行 这段时间在开发手机端h5页面的时候就遇到一个问题 当在真机上测试的时候 底部使用固定定位的按钮被输入法弹框顶起来 这该如何解决呢？ 这个问题目前发现是部分安卓机上存在 解决思路有两个
vue移动端解决输入框唤起键盘时将底部按钮顶起问题总结
weixin_42017221的博客
11-01 1181
4、当前高度和原始高度相差一定像素时，将focusShow改为false,隐藏按钮。2、在按钮中添加v-if判断focusShow（首次加载为true）当在移动端唤起键盘时，手机键盘会把底部按钮顶起,如下所示。3、监听键盘事件，当键盘唤起时，再次获取高度。1、首次进入页面加载原始高度，存起来。
h5键盘弹起底部菜单(按钮)被顶起-vue自定义指令解决
m0_37824255的博客
09-20 2768
开发H5中测试过程中发现在安卓手机上，input/textarea 获取焦点 软键盘弹出 会让absolute/fixed或者使用flex局部 固定在底部的元素(固定底部栏)顶起来问题；在搜索后发现安卓上在键盘弹起的时候浏览器。我这边我是使用了input/textarea 的focus/blur事件，及配合resize事件来设置固定底部栏。添加上之后 我们就会发现现在是可以符合我们的条件的，当键盘展示时隐藏底部固定栏，收起键盘时展示底部固定栏。自定义指令详情 请参考官方文档。
vue3+vant4 移动端软键盘弹出 收起导致项目样式布局错乱解决方案，亲测有效！！
枫ゞ的博客
01-04 1780
最近在做vue3 H5的移动端项目 我用的是vue3+vant4，然后在使用过程中发现 小米14手机在点击输入框软键盘弹出 时会导致项目布局整体向上移动 导致页面布局错乱。
uniappH5页面 样式错乱
weixin_44375151的博客
03-19 777
今天在编写代码的过程中遇到一个小问题，自己也踩坑了，所以将经验分享出来，希望能帮助到你。
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
10-16
今天小编就为大家分享一篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
H5开发app页面，点击输入框或文本域弹出输入面板时，布局会被顶上去的解决办法
黄小梁的博客
04-17 6285
本人学的是android原生的，现在刚实习，公司本意呢想让新人学习下新技术就把我安排到开发android h5页面去了，虽然之前学过一点h5的知识，但是呢实际操作起来不如意啊。遇到这个问题时，我不知道怎么做啊，还是度娘吧，整理出了这个解决办法。&lt;script type="text/javascript"&gt; // 控制手机输入法弹出时,页面不会...
H5页面，固定在底部的按钮被弹起的输入法顶上去
最新发布
zytyxz的博客
05-17 151
h5输入法兼容
uniapp h5中输入框输入时，会将内容顶上去的解决方案
博客简介
05-05 5158
h5中输入框输入时会导致键盘将页面顶上去，本文章写了完整的解决方案，以及思路提供参考 （监听键盘的打开和关闭事件）
uniapp项目H5端横屏问题-样式错乱+字体大小+video
Penk的博客
06-14 7273
uniapp项目H5端，如果手机打开了自由旋转，横屏问题就会出来，样式错乱、字体大小、以及使用遮罩层级没有video 高的问题。
vue或者移动端h5页面input框被输入法键盘遮盖问题
彤先森的博客
01-22 1076
vue或者移动端h5页面input框被输入法键盘遮盖问题
h5软盘占位把定位内容往上顶_html5页面当点击input输入框弹出安卓手机上键盘就会把背景顶了上来，页面布局就乱了，求帮助...
weixin_35861708的博客
01-14 354
.trueBg01{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:50%;}.trueBg02{position:absolute;top:50%;left:0;right:0;bottom:0;width:100%;height:90%;....trueBg01{position: absolute;top: ...
彻底解决H5软键盘弹起遮挡输入框的问题
yiguoxiaohai的博客
03-08 2631
H5开发过程中，软键盘弹起有时会出现遮挡Input输入框的问题，下面来看看解决方法。
Html5（移动端）开发，安卓机上的软键盘顶起影响页面布局
热门推荐
sinat_36193631的博客
07-22 1万+
1.可能会出现的bug 一是：页面有输入卡框，在iphone手机上测试，点击输入框时，软键盘弹出，页面正常显示，在安卓机上测试，点击输入框时，软键盘弹出，页面出现压缩 具体压缩现象： 1.当所有元素的高度都设置为百分比，或者vh时，都会被压缩（写死固定值不现实） 2.例如banner区域设有轮播图，软键盘弹起时图片会被压缩，变窄 3.当底部设有button按钮的时候，iphone中不会被
手机端虚拟键盘弹出使界面布局混乱解决方法
yzbben的博客
03-07 9005
html5页面当点击input输入框弹出安卓手机上键盘就会把背景顶了上来，软键盘弹出时，改变了height，使height:100%,不能达到原来的高度。 页面布局就乱了,解决方法： 原生js: window.onload=function(e){ var _body=document.getElementsByTagName('body')[0]; _body.
taro Ui Vue3 h5 安卓机输入框弹窗键盘时，会把页面顶上去 代码举例
06-03
感谢您的提问！以下是 Taro Ui Vue3 中防止 H5 安卓机在输入框弹窗键盘时将页面顶上去的一个例子： ``` <template> <div> <AtButton type="primary" @click="toggleModal">弹出模态框</AtButton> <AtModal :isOpened="isOpened" @close="handleClose"> <AtModalHeader>标题</AtModalHeader> <AtModalContent> <div class="input-wrapper"> <input type="text" placeholder="请输入内容" @focus="handleFocus" @blur="handleBlur"> </div> </AtModalContent> <AtModalAction> <Button onClick="handleClose">取消</Button> <Button onClick="handleClose">确定</Button> </AtModalAction> </AtModal> </div> </template> <script> import { defineComponent, onMounted, ref } from 'vue' import { AtButton, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui-vue3' export default defineComponent({ name: 'ModalExample', components: { AtButton, AtModal, AtModalHeader, AtModalContent, AtModalAction, }, setup() { const isOpened = ref(false) const toggleModal = () => { isOpened.value = !isOpened.value } const handleClose = () => { isOpened.value = false } const handleFocus = () => { if (/Android/gi.test(navigator.userAgent)) { setTimeout(() => { document.activeElement.scrollIntoViewIfNeeded() }, 100) } } const handleBlur = () => { if (/Android/gi.test(navigator.userAgent)) { setTimeout(() => { document.activeElement.scrollIntoViewIfNeeded() }, 100) } } onMounted(() => { if (/Android/gi.test(navigator.userAgent)) { const height = window.innerHeight const timer = setInterval(() => { if (window.innerHeight !== height) { document.body.style.height = window.innerHeight + 'px' height = window.innerHeight } }, 100) return () => clearInterval(timer) } }) return { isOpened, toggleModal, handleClose, handleFocus, handleBlur, } }, }) </script> <style scoped> .input-wrapper { padding: 20px; } input { width: 100%; height: 50px; font-size: 18px; border: none; border-bottom: 1px solid #ccc; outline: none; } </style> ``` 这个例子中，我们使用了 Taro Ui Vue3 的 AtModal 组件，同时在输入框的 focus 和 blur 事件中，通过调用 `scrollIntoViewIfNeeded()` 方法，将输入框滚动到可视区域内。同时，在组件挂载时，我们通过监听窗口大小的变化，动态设置 body 的高度，以防止页面出现滚动条。希望这个例子能够帮到您！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值