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: 截取的关键代码,没测试,有问题大概就是这个解决思路)

相关推荐
开心猴爷6 小时前
应对iOS审核4.3:可以使用 IpaGuard 来给属性名混淆的技术细节与平衡之道
后端·ios
iOS开发上架哦6 小时前
iOS应用耗电测试:使用Energy Log、Keymob和Instruments进行性能监控与能源消耗分析
后端·ios
_瑞8 小时前
APM_KSCrash 原理
ios
PedroQue9911 小时前
unix-utils v0.2.0 发布:modal 全端统一,自绘窗口解决输入框难题
前端·uni-app
茶底世界之下15 小时前
窗光静物一定要更亮吗?用 Awaking 把曝光收回一点
ios
ii_best17 小时前
ios手机开发安卓脚本开发软件[按键精灵教程]从「找最小值」到「Boss 最近刷新」再到「屏幕范围极值」
android·ios·智能手机·自动化·按键精灵
茶底世界之下2 天前
林间步道要不要加暗角?用 Awaking 把强度收在20%
前端·ios·图片资源
season_zhu2 天前
Skills For Real Engineers 系列之一:先配好项目,再让 ask-matt 帮我选技能
ios·openai·ai编程
疯狂敲代码的老刘2 天前
d2r-mobile:3.2千星开源暗黑破坏神2 iOS兼容层,3天冲上GitHub日榜
ios·github
黑科技iOS上架2 天前
App Store5.6隐藏功能究竟怎么排查?
ios·审核