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

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

时间:2023-09-15 15:14:37浏览次数:28  
标签:flex softinputMode app 输入框 background uni 页面

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

我们每次在做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里加上这段代码就能完美解决了

 

{
            "path" : "pages/chatDt/chatDt",
            "style" :{
                "navigationBarTitleText": "聊天详情",
                "navigationStyle": "custom",
                // #ifdef APP-PLUS
                "enablePullDownRefresh": false,
                // #endif
                "disableScroll": true,
                "app-plus": {
                    "scrollIndicator": false, //禁用原生导航栏
                    "softinputMode": "adjustResize"
                }
            }
        },

聊天界面的布局,可以不用fixed实现

 

<view class="warp">
        <view class="header"></view>
        <view class="body"></view>
        <view class="footer" @click="test">
            <view style="height: 44px;"></view>
            <view v-if="isshow" class="box"></view>
        </view>
    </view>
.warp{
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.header{
    height: 44px;
    background-color: red;
    width: 100%;
    display: flex;
}
.body{
    width: 100%; height: 100%;
    background-color: blue;
    flex: 1;
    display: flex;
    flex-shrink: 0;
    flex-grow: 1;
}
.footer{
    width: 100%;
    display: flex;
    background-color: yellow;
}
.box{
    height: 100px;
    width: 50%;
    background-color: green;
}

 

标签:flex,softinputMode,app,输入框,background,uni,页面
From: https://www.cnblogs.com/haonanZhang/p/17705039.html

相关文章

  • 关于Unity2021 Timeline
    谨以我的第一篇游戏&图形学(可能没啥关系)相关blog缅怀带我入门的毛星云前辈。总感觉想说点什么,却又什么都说不出来。我大概很长时间都不会忘记这个名字。作为一个unity初学者,记录一下自己的unitytimeline使用过程。突发奇想了解了一下,说不定未来能自己做个avg(笑[toc]#1、Tim......
  • uniapp-文件上传
    一使用uni.uploadFile 二具体实现案例<template><viewclass="container">主页<button@click="getInfo()">测试接口</button></view><view><uni-sectiontitle="选择图片&qu......
  • uniapp VUE-H5页面微信公众号内使用微信JSAPI支付
    注意看本文主要讲解uniapp打包成h5页面并部署在公众号时使用JSAPI的微信支付问题前期准备工作.首先要有一个开通商户注册的公众号,我们需要他的appid;.其次要开通商户公众号的公众号支付的功能并添加域名,开通完成后就可以基本开始我们的开发了既然是jsapi开发自然是要引入的......
  • 618京东到家APP-门详页反爬实战
    一、背景与系统安全需求分析1.系统的重要性上图所示是接口所属位置、对电商平台或在线商店而言,分类查商品都是很重要的,通过为用户提供清晰的商品分类,帮助他们快速找到所需产品,节省浏览时间,提升购物效率,是购物结算产生GMV的核心环节。那么电商平台为什么都很看重商品信息的爬......
  • Unity 游戏开发、03 基础篇 | C#初级编程
    C#初级编程https://learn.u3d.cn/tutorial/beginner-gameplay-scripting8Update和FixedUpdateUpdate(不是按固定时间调用的)经常用于移动非物理特性的物体(不是物理对象)简单定时器接收输入FixedUpdate(调用时间间隔相同)进行任何必要的物理计算(任何物理对象)最好使用力......
  • uniapp-net core后台-实现认证
    一在program.cs中添加cookie认证builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCookie(options=>{options.Cookie.Name="auth";options.ExpireTimeSpan=TimeSpan.FromDays(1);options.Sli......
  • 续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App
    一觉醒来,GPT-4已经发布了!GPT-4实现了真正的多模态,可以把纸笔画的原型直接写出网页代码。读论文时还能理解插图含意。好消息是,ChatGPTPlus用户目前可以提前尝鲜GPT-4模型。作为高贵的Plus用户,这怎么能忍?立马打开ChatGPT切换到最新模型。一位Twitter网友经过测试发现......
  • KdMapper扩展实现之Huawei(Phymemx64.sys)
    1.背景  KdMapper是一个利用intel的驱动漏洞可以无痕的加载未经签名的驱动,本文是利用其它漏洞(参考《【转载】利用签名驱动漏洞加载未签名驱动》)做相应的修改以实现类似功能。需要大家对KdMapper的代码有一定了解。 2.驱动信息 驱动名称Phymemx64.sys 时间戳5835......
  • app测试日常踩坑——新老版本共用缓存问题
    需求:在测一个页面,老版本就存在的一个页面(多个模块,一个接口分成三次请求返回),但是新版本要新增一个模块。老的页面的实现方式是页面直接读取redis数据(还有其他逻辑,方便解释暂时这样说),截取模块的方式来分接口返回,新增的一个模块是要放在中间。方案:方案是沿用老的redis缓存,在老得缓存......
  • app测试日常踩坑——gocache缓存的过期时间和生成间隔问题
    问题:自动化监控平台添加的分类详情页的接口报错,分类详情页校验失败,看到的错误信息是接口响应错误,信息如下:{"errors":{"id":"0","code":"44010102","level":"1","status":"200","title":"参数错误","popup......