首页 > 其他分享 >解决uni-app 输入框,键盘弹起时页面整体上移问题

解决uni-app 输入框,键盘弹起时页面整体上移问题

时间:2024-02-26 16:12:53浏览次数:30  
标签:softinputMode app 输入框 tabbar windowHeight uni 页面

我们每次在做UNIAPP小程序和H5遇到输入框时,总会在测试的时候点击输入框弹出软键盘把页面往上移动,仔细翻读uniapp文档的时候发现了一个属性adjust-position :Boolean类型,作用是键盘弹起时,是否自动上推页面

1.发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize

2.这个softinputMode属性在page.json文件中,找到需要修改的页面配置,在app-plus中找到softinputMode属性,uniapp中默认属性值是adjustPan,
在pages.json里该页面注册的style里加上这段代码就能完美解决了

"style": {
	"navigationBarTitleText": "对话详情",
	"enablePullDownRefresh": true,
	//手机软键盘升起不让其将页面头部上推
	"app-plus": {
		"softinputMode": "adjustResize"
	}
}

softinputMode的值为adjustResize时,屏幕高度=整个页面高度+软键盘高度,,,为adjustPan时,整个页面高度不变,但键盘弹出后页面会上移

其它思路

移动端h5页面经常会遇到软键盘顶起底部fixed定位元素,体验不好。记录下uni-app下同样的问题是如何解决的。

解决思路:获取窗口尺寸,监听窗口尺寸变化,比较变化后窗口的尺寸和实际窗口尺寸的大小做相应处理。直接上代码:

<!--html-->
<input type="text" @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar" placeholder=""/>
<view v-if="tabbar">底部悬浮</view>
data(){
return{
tabbar: true,
windowHeight: ''
}
},
onLoad() {
uni.getSystemInfo({
success: (res)=> {
this.windowHeight = res.windowHeight;
}
});
uni.onWindowResize((res) => {
if(res.size.windowHeight < this.windowHeight){
this.tabbar = false
}else{
this.tabbar = true
}
})
},
methosd:{
showTabbar(){
this.tabbar = true;
},
hideTabbar(){
this.tabbar = false;
}
}

@click和@blur 分别解决安卓和ios 兼容问题
=====================================================================================

ps:可以利用弹性布局,中间flex为1,底部按钮固定高度。

标签:softinputMode,app,输入框,tabbar,windowHeight,uni,页面
From: https://www.cnblogs.com/Lotos/p/18034579

相关文章

  • [Go Unit testing] Unit testing Go program
    Code:config.gopackageprojectorimport( "fmt" "os" "path")typeOperation=intconst( PrintOperation=iota Add Remove)typeConfigstruct{ Args[]string OperationOperation Configstring Pwdstring}f......
  • APP应用内测分发时需要注意哪些
    作为开发人员,我们都知道,一个APP的成功与否,不仅取决于其功能和用户体验,更与其分发方式息息相关。尤其在当前市场竞争激烈的环境下,如何让你的APP脱颖而出,快速触达目标用户,是每一个开发者都面临的挑战。而作为行业内知名的APP分发平台,虾分发https://xiafenfa.com/始终站在分发技术的......
  • MAUI Blazor+MASA开发安卓应用学习笔记 - 设置APP格式、名称、版本信息
    上一期说到了如何生成APP应用,生成的文件是AAB格式的,这个格式安装不是很方便,如果能生成APK就好了 一、设置APP格式打开项目文件.csproj,在PropertyGroup下添加属性<AndroidPackageFormat>apk</AndroidPackageFormat>二、设置名称和版本信息在项目文件里,可以设置全局的应用......
  • Applescript实现无痕检测手机号或邮箱号是否注册iMessage服务,iMessage蓝号检测完美实
    一、检测数据的两种方式:1.人工筛选,将要验证的号码输出到文件中,以逗号分隔。再将文件中的号码粘贴到iMessage客户端的地址栏,iMessage客户端会自动逐个检验该号码是否为iMessage账号,检验速度视网速而定。红色表示不是iMessage账号,蓝色表示iMessage账号。2.编写脚本控制Macos/iph......
  • uniapp-vue2-微信小程序,canvas 裁切图片的代码
    <canvasclass="edit-question-canvas"type="2d"id="canvasCuteImage"></canvas>/*.edit-question-canvas{position:absolute;left:-750rpx;width:690rpx;height:100rpx;}样式随便自己写*/......
  • iOS App 上架指南及关键建议
    引言上架AppStore是将iOS应用提交申请并上线的过程,旨在让应用在AppStore上展示,吸引用户并获取流量。本文将介绍iOS上架的整体流程,并提供一些建议和注意事项。 一、iOS上架的整体流程1.申请开发者账号首先,需要申请苹果的开发者账号。开发者账号分为个人账号、公司账号和......
  • 最新Unity游戏主程进阶学习大纲(2个月)
    过完年了,很多同学开始重新规划自己的职业方向,找更好的机会,准备升职或加薪。今天给那些工作了1~5年的开发者梳理”游戏开发客户端主程”的学习大纲,帮助大家做好面试准备。适合Unity客户端开发者。进阶主程其实就是从固定的几个方面搭建好完整的知识体系做好对应的回答和准备,学习......
  • SpringBoot:通过实现自定义接口获取实现类的@RequestMapping注解请求路径
    1.自定义接口//什么都不用写,就定义一个空接口publicinterfaceMyMark{}2.Controller接口类实现自定义接口@RestControllerpublicclassDayControllerimplementsMyMark{@RequestMapping("/day1")publicStringget1(){return"day1";}......
  • Unity对象池(应用:游戏音效管理系统)
    打算为项目增加音效,但是没有头绪不知从何做起。想要做一个便于拓展的音效管理系统,通过搜集网上资料暂时得到以下两种方案。(虽然实现方式远不止两种)其中对象池技术早有耳闻,趁此机会学习并应用。一、创建一个AudioManagerAudioManager通常是一个单例(Singleton)类,负责管理和播放游戏......
  • Part4: Appendix
    本文是\(\text{diffusionmodels}\)中相关公式的推导部分,主要对论文中一些被省略的推导进行补充说明,对“扩散模型”感兴趣请查看前几篇文章。高斯分布概率密度函数若\(x\sim\mathcal{N}(\mu,\sigma^2)\),则:\[f(x;\mu,\sigma)=\frac{1}{\sigma\sqrt{2\pi}}\exp\left(-......