解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题
问题描述:
最近的做了个客服聊天的功能,遇到一个问题如下:
在手机上点击聊天页底部的input框后,键盘弹起同时页面会整体上移,标题栏被顶上去了。如下图:
问题分析:
input
获取焦点时会自动调起手机键盘,设置 :adjust-position="true"
,会导致键盘弹起时页面整体上移
解决思路:
- 设置使键盘弹起使页面不上移
- 设置输入框所在盒子为绝对定位
- 键盘弹起时获取键盘高度
- 设置输入框所在盒子的bottom的键盘高度
解决方案:
注意:我这里是将消息输入部分封装成了组件,引入到它所在的
view
里的,所以需要将键盘高度子传父传值给它所在的盒子,如果是在同一个文件中的话直接将获取到的键盘高度赋值给bottom
就可以。
1. input
<inputclass="TUI-message-input-area":adjust-position="false" // 修改为 false,使键盘弹起页面不上移cursor-spacing="20"v-model="inputText"@input="onInputValueChange"maxlength="140"type="text"placeholder-class="input-placeholder"placeholder="说点什么呢~"@focus="inputBindFocus" // 添加获取焦点键盘弹起事件@blur="inputBindBlur" // 添加失去焦点键盘隐藏事件
/>
重点在这里!!!我踩坑被折磨很久的一个地方!!!一定要用 px!!!
methods: {inputBindFocus(e) {// 获取手机键盘的高度,赋值给input 所在盒子的 bottom 值// 注意!!! 这里的 px 至关重要!!! 我搜到的很多解决方案都没有说这里要添加 pxthis.$emit('changeBottomVal', e.detail.height + 'px')},inputBindBlur() {// input 失去焦点,键盘隐藏,设置 input 所在盒子的 bottom 值为0this.$emit('changeBottomVal', 0)}
}
2. input 所在的盒子:
<view v-if="showChat" class="message-input" :style="{ bottom: bottomVal }"><TUI-message-input id="message-input" ref="messageInput" :conversation="conversation" @sendMessage="sendMessage" @changeBottomVal="changeBottomVal"/>
</view>
data() {return {bottomVal: ''}
}
methods: {changeBottomVal(val) {this.bottomVal = val}
}
.message-input {flex-shrink: 0;width: 100%;position: absolute; // input 所在盒子设置绝对定位left: 0;bottom: 0; // 默认 0z-index: 199;
}
总结:
由于获取的系统的尺寸单位都是 px ,给 bottom 设置的值单位也一定要是 px ! 不能因为是手机端就用 rpx,2倍的 rpx 也不可以,因为并不是每个手机分辨率都是我们设计图上375的2倍,一定要用 px 啊!!!
解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题相关推荐
- 微信小程序 input 输入框控件 bindinput 没有响应
微信小程序 input 输入框控件 bindinput 没有响应 问题: 微信小程序 input 输入框控件 bindinput 没有响应 原因: 我以为是我这边的问题,检查很多遍检查不出来,最后换个 ...
- 华为手机 微信小程序 input输入框上移
不知道大家有木有遇到过 微信小程序的input 调起输入法的时候 会被挤上去 输入框跑到上面去了 无论css怎么写怎么布局 还是会跑上移 尤其是测试mm的华为手机 别的手机都OK的 解决的方法是 给i ...
- 微信小程序: input输入框placeholder样式的修改
相信大伙在开发微信小程序的时候都会遇到这种问题.因为客户的需求,所以我们需要对input框中的placeholder的样式进行修改.接下来告诉大家怎么修改,该方法仅适用于微信小程序. 一.我们要给pl ...
- 微信小程序input输入框密码的显示与隐藏
1.实现效果 2.实现原理 input的type之中并无password属性. 小程序提供了一个password属性,用来表示是否是密码类型. 关键思路:动态改变password的值,从而实现密码的显 ...
- 微信小程序input输入框关键字自动联想及关键字高亮
找了好多博客都没有找到关于小程序,模糊查询,自动联想,和关键字高亮显示的文章,没办法,自己造吧. 本文采用的是动态联想,即在input框中输入关键字后,将关键字作为条件去数据库查询,然后将所有查询结果 ...
- 微信小程序input输入框
1.实现input框只能用来传值,不能写数据的办法,是直接让disabled="true"就可以了 <input id='name' disabled="true& ...
- 微信小程序input输入框校验手机号输入错误
<view class="flex jc-between"><view>联系方式</view><input class="pla ...
- 小程序数据框有重影_微信小程序input重影什么原因?怎么解决重影?
微信小程序input重影什么原因?怎么解决重影?微信小程序input输入框输入出现了重影的情况,这是什么原因呢?又该怎么去解决微信小程序input重影问题. 微信小程序input重影怎么办? 问题描述 ...
- 微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
最新文章
- Android Monkey使用
- VMware虚拟机相关文件问题
- [ c++] cmake 编译时 undefined reference to `std::cout‘ 错误的解决方案
- 基于OIDC(OpenID Connect)的SSO
- Jbpm工作流表补数记录
- android javamail客户端获取慢_QQ音乐Android客户端Web页面通用性能优化实践
- OpenCV静态编译配置基于小熊猫C++
- 卖租房子房产中介管理系统平台小程序app开发搭建
- gie拉取Can‘t update master has no tracked branch
- Linux 用户和权限管理
- 潘通色号与rgb转换_中秋福利!手把手教你用Python做一只口红色号识别器,秒变李佳琦...
- js-array数组-slice-splice
- Bootstrap 4 snippets 代码段
- cuda和GPU驱动的关系
- 【干货长文】诺亚财富解读市场信息心理学
- 游戏开发和设计推荐书籍
- 入侵91网直到拿下服务器#并泄露150w+用户信息
- linux添加黑体和宋体,linux添加字体
- DIY制作示波器的超详细教程:(二)电路才是“硬”道理——硬件电路简述
- 数据处理(外贸数据管理系统)
热门文章
- 宝塔linux面板和centOS的区别,关于 Linux Centos7 宝塔面板的问题
- 宇信易诚 为何成长如此之快
- python离线语音唤醒算法_python实现离线语音识别
- 0.91寸 SSD1306 OLED介绍(二) --- 命令介绍
- 第十二期 U-Boot工作原理 《路由器就是开发板》
- GTSAM中ISAM2和IncrementalFixedLagSmoother说明
- 三菱fx2nPLC自学笔记01
- indexedDB(三)查询(详细)篇
- HDMI上电信号分析
- 用计算机时按错了按什么键恢复出厂设置,电脑开机按什么键进入一键还原 选择高级—将系统恢复到过去某...