uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。

如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。

输入法出来后,设置了自动将页面顶上来的配置:pages.json

"softinputMode": "adjustResize"

javascript 复制代码
"globalStyle" : {
        "navigationBarTextStyle" : "black",
        "navigationBarTitleText" : "uni-app",
        "navigationBarBackgroundColor" : "#F8F8F8",
        "backgroundColor" : "#F8F8F8",
        "app-plus" : {
            "titleNView" : false,
			"softinputMode": "adjustResize"
        }
		// "disableScroll": true // 禁用旧版页面缓存
    },

如果快速返回页面,或者跳转其他页面,输入法没来得及收回,那么顶上去的页面就会无法弄下来,所以我们需要手动处理一下。

先来个公共方法:main.js,主要是收起软键盘。

javascript 复制代码
Vue.prototype.$hideKeyboard = function(url){
	// console.log('收起软键盘')
	setTimeout(()=>{
		uni.hideKeyboard(); // 收起软键盘
	},50)
};

需要在每个页面的onshow生命周期内调用。

javascript 复制代码
onShow(){
			this.$hideKeyboard()
		},

其他处理方式

可以在滑动页面时自动取消输入法聚焦,这样就不用设置页面顶上去的功能。

相关推荐
于慨1 分钟前
uniapp上传文件
前端·uni-app
周某某~1 分钟前
Rabbit MQ的消息模式-Java原生代码
java·分布式·rabbitmq
安然dn3 分钟前
极简实战:React + Vue 微前端(Qiankun + Vite)
前端·vue.js
Electrolux5 分钟前
使用 Semantic Release 实现 NPM 全自动发版 monorepo 和 单仓库 项目
前端
lichenyang4535 分钟前
Javascript模块化与Async语法糖
前端
天天摸鱼的java工程师7 分钟前
如何实现一个分布式锁?——来自 Java 老兵的实战总结 🚀🔐
java·后端·面试
LZQqqqqo9 分钟前
C# XML 文件
xml·java·c#
北京_宏哥10 分钟前
🔥Python零基础从入门到精通详细教程10 - python数据类型之数字(Number)-整型(int)详解
前端·python·面试
YGY_Webgis糕手之路12 分钟前
Cesium 快速入门(十二)数据加载详解
前端·gis·cesium
小高00713 分钟前
别让主线程累成狗!——带你 10 分钟撸一个 Web Worker,让浏览器偷偷开外挂
前端·javascript·面试