uniapp ios端使用fixed定位导致输入时页面滚动简单解决方法

当移动端使用fixed定位自定义nav栏时,安卓端正常固定在可视窗顶部,但是ios端当有input输入,弹出软键盘时,会将nav顶出可视区,因为在ios上,不是相对于浏览器窗口定位的,而是相对于最近的可滚动区,所以就会导致软键盘弹出时,跟随内容一起滚出去了

解决一

js 复制代码
//pages.json 配置style 
	"style": {
		//手机软键盘升起不让其将页面头部上推
		"app-plus": {
			"softinputMode": "adjustResize"
		}
	},

当我们配置完后会发现,ios端解决了顶出的问题;很棒!但接着新问题又出现了,软键盘弹出时滚动页面,自定义nav栏又跟着跑了(¬︿̫̿¬☆),怎么办呢,我们可以监听页面滚动事件,当页面滚动时就收起软键盘,这样就不会跟着跑啦;

html 复制代码
<input class="input"  v-model="oneTopic.value" :adjust-position="false" @input="onInputValue()" />
js 复制代码
//监听页面滚动事件
	export default {
		data() {
			isInput: false
		},
		onPageScroll(res) {
			console.log("页面滚动了", res)
			if (!this.isInput) {
				uni.hideKeyboard() //隐藏软键盘
			}
		},
		methods: {
			onInputValue() {
				this.isInput = true
			}
		}
	}

你们一定会问,为啥多了个isInput的判断,因为实测发现,当input框被软键盘挡住时,输入会触发页面滚动事件,真是离谱;为了解决这个问题,我们可以监听页面input的输入事件,当输入时,赋值给isInput,这样就能判断是真实页面滚动,还是输入事件;这样一个不完美的解决方案就完成了;

(ps: 截取的关键代码,没测试,有问题大概就是这个解决思路)

相关推荐
Q_Q19632884751 小时前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
百思可瑞教育3 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e4 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
00后程序员张4 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
咕噜签名分发冰淇淋6 小时前
内测分发是什么?
ios
不知名的前端专家9 小时前
uniapp原生插件 TCP Socket 使用文档
网络·tcp/ip·uni-app·netty
fakaifa10 小时前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版
2501_9160074710 小时前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview
白玉cfc11 小时前
【OC】单例模式
开发语言·ios·单例模式·objective-c
fakaifa11 小时前
CRMEB多门店 v3.3源码 无授权限制+PC端+uniapp前端
小程序·uni-app·商城小程序·技术教程·源码下载·crmeb多门店