【uniapp-h5】fixed定位搜索框 focus模式下弹出键盘并滚动搜索框错位问题

嘘，别信他

于 2022-03-16 11:45:38 发布

阅读量548

点赞数

分类专栏： uniapp vue 文章标签： javascript css3 css 小程序

本文链接：https://blog.youkuaiyun.com/aalaad/article/details/123507933

版权

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

uniapp

2 篇文章

订阅专栏

这段代码展示了如何在Vue中实现一个遮罩层，用于在input框聚焦时防止页面滚动。通过监听touchmove事件并阻止其默认行为，确保输入框在手机端使用时不会因键盘弹出导致页面错位。遮罩层使用了固定定位、全屏覆盖及透明度设置，同时设置了overflow:hidden以禁用内部滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<template>
		<!-- 遮罩层，避免input框聚焦时，弹起的键盘导致搜索框错位 -->
		<view class="maskBox" @touchmove.stop.prevent="moveHandle" v-show="inputting">
	</template>
	<script>
		...
		// 阻止滚动
		moveHandle(){
			return
		},
		....
	</script>
	<style>
		.maskBox{
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.6);
			z-index: 666;
			overflow: hidden;
		}
	</style>