uniapp之app、微信小程序实现输入框发送消息键盘不收起、解决iOS端键盘弹起遮挡输入框问题
1. 效果
微信小程序：
iOS app
2. 背景
公司产品最近提了个bug需求，聊天界面在发送一次消息后，键盘会收起，期望是：点击发送消息后，键盘不收起。得到这个需求时，组长就跟我说过这个需求不好做，真的做了后才发现到处是坑，断断续续做了4天，网上资料也找了并试了一堆，都是按下葫芦起了瓢，就Android端的APP符合要求，第4天准备下班了，突然就找到思路了，最终四个场景都符合要求，至于不同机型不同系统版本是否还存在什么问题，就没那条件去试了。
我们这个uniapp项目是app、微信小程序两端的，聊天界面用的是某IM产品提供uniapp版本的demo代码，不知道是技术问题没做好，还是太久没去更新了，修改时问题不断，iOS原生版本是挺符合需求的。（最坑的一点是：消息列表组件用的是view元素，但元素里却挂了一堆scroll-view元素的属性，界面跳转至最新一条消息也是用scroll-view的属性实现。属实把我整迷糊了，官方文档也翻了好几遍也没找到对应属性，搞得我还在怀疑是不是view的某些隐藏属性，但官方没列出来。让我多进了几个坑，后面的解决方案也是从这方面入手）
3. 主要遇到问题及尝试失败的解决
（1）小程序端使用设置focus属性的方式去处理，出现闪动。
这个方案每发送一次消息，都会有键盘收起再弹起的情况，这种方案被否定。
（2）iOS键盘遮挡输入框、消息列表最新几条消息。
ios键盘弹起时是符合要求的（输入框跟随弹起、输入框上显示的也是消息列表的最新一条数据），发送一条消息后，输入框(用的是fixed)、消息列表都掉下去被键盘遮住，多发几条消息后，输入框会移上来回到正确位置，消息列表的消息虽然会往上滚动，但最新几条被键盘遮住。
主要就是在输入框位置显示有问题、消息列表最新数据被键盘遮住（显示在手机屏幕底部）、发送消息时消息列表中的数据未向上滚动这三个问题中反复摇摆。
列出部分尝试：
- 将adjust-position设置为false，通过uni.onKeyboardHeightChange监听键盘弹出得到键盘高度，从而动态给输入框设置bottom属性的值，给消息列表设置底部内边距。（结果：输入框位置能正确显示，但键盘弹起时向上滑动消息列表，输入框会跟着界面向上滑动；消息列表顶不上去，只会往下增加空白页面）
- 为处理第1步中输入框会滑动的问题，尝试通过监听最外层元素的touchmove、touchstart事件，在事件触发时调用uni.hideKeyboard()将键盘收起。（结果：键盘弹出后的第1次滑动、点击时，事件没有触发，好像有层膜存在一样，输入框继续跟着上滑；再次滑动、点击，事件触发，键盘关闭）
4. 最终解决
主要是使用scroll-view元素来实现消息列表界面，输入框使用fixed定位。之前虽然在demo代码的view上看到一堆scroll-view元素的属性，也怀疑对方之前用的是scroll-view，但为了通过onPullDownRefresh实现下拉加载历史消息功能，而改成了view。这我也能理解，毕竟使用scroll-view，onPullDownRefresh就无法被触发，也没去细研究scroll-view中的相关属性，毕竟公司的主要项目是在PC端，app、微信小程序能用就行，会uniapp的基础语法就够用了（吐槽一下，被这些问题折磨的不轻）。
言归正传，主要要实现的是：
1、小程序发送消息后，键盘不收起，也不接收键盘收起再弹起。
2、iOS键盘弹起时输入框不被遮住、消息列表能看到最新一条。
目标1解决：
在小程序中将textarea的hold-keyboard设置为true。
此时能实现目标1要求，但还需要保留点击输入框、发送按钮之外的地方，键盘收起功能。
给最外层元素、输入框、发送按钮分别绑定touchend事件，在点击界面中时，最外层的事件会触发（handleTouchEnd），此时调用uni.hideKeyboard()将键盘收起。
如果点击的是输入框、发送按钮，它两的事件的触发会先于最外层元素的事件的触发，在它两事件触发时，通过一个标记holdKeyboardFlag变量，让uni.hideKeyboard()不执行即可。
为什么用touchend事件，而不用touchstart等其他事件，这是因为@touchend.prevent=”sendMessage”可以使输入框在点击发送后，输入框重新获得焦点并且不会出现闪动（虽然只对app、h5有用，对小程序无效）。为了不再增加额外的处理，就统一用touchend。
目标2解决：
view元素替换成scroll-view元素后就能实现目标要求。但这样会出现无法下拉加载历史消息的问题，所以要再去实现下拉加载功能。实现代码，如下图：
还有界面滚动至最新一条消息时的一个小坑就不写了，直接看示例代码，项目的代码是分了好几个组件，示例代码主要展示的是核心实现。样式什么的能用就行。
以下是重新整理后的示例代码：
{{item.msg}}
export default {
name: 'ChatDemo',
data() {
return {
isFresh:false, // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
freshing:false,
intoViewId: "",
chatMsgList: [],
inputMessage: "",
holdKeyboard: false, // focus时，点击页面的时候不收起键盘
holdKeyboardFlag: true, // 是否在键盘弹出，点击界面时关闭键盘
}
},
created() {
// 针对小程序键盘收起问题处理
// #ifdef MP-WEIXIN
this.holdKeyboard = true
// #endif
},
mounted() {
this.init()
},
methods: {
init() {
for (let i = 0; i {
// 键盘弹出时点击界面则关闭键盘
if (this.holdKeyboardFlag) {
uni.hideKeyboard()
}
this.holdKeyboardFlag = true
}, 50)
// #endif
},
// 自定义下拉刷新被触发
scrollRefresh(){
if (this.freshing) return;
this.freshing = true;
this.isFresh = true;
this.$emit('refresh');
this.getHistoryMsg()
},
// 自定义下拉刷新被复位
onRestore(){
this.isFresh = false
},
// 获取历史数据
getHistoryMsg() {
const mid = ''
this.handleScrollIntoView(mid)
},
// 刷新界面数据
async refreshMsg() {
const mid = this.chatMsgList[this.chatMsgList.length - 1].mid // 目标元素id
// 跳到最后一条
this.handleScrollIntoView(mid)
},
sleep(num = 1, step = 50) {
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, num * step)
})
},
// 查找目标元素
querySelectEl(markers) {
const that = this
return new Promise((resolve) => {
uni.createSelectorQuery().in(that).select(markers).boundingClientRect((container) => {
console.log(container, 888);
const flag = container ? true : false
resolve(flag)
}).exec()
})
},
// 滚动至目标元素位置
async handleScrollIntoView(intoViewId) {
let flag = false
for (let i = 0; i {
this.intoViewId = intoViewId
})
},
// 点击输入框、发送按钮时，不收键盘
handleNoHideKeyboard() {
// #ifdef MP-WEIXIN
// this.$emit('noHideKeyboard')
this.holdKeyboardFlag = false
// #endif
},
// 发送消息
sendMessage() {
this.handleNoHideKeyboard()
// 发送消息代码
this.chatMsgList.push({
mid: `msg${this.chatMsgList.length}`,
msg: `新消息${this.inputMessage}`
})
this.inputMessage = ''
this.refreshMsg()
},
}
}
.page {
width: 100%;
height: 100%;
}
.area-msglist {
width: 100vw;
height: 100vh;
.msglist {
background-color: #FAFAFA;
height: calc(100vh - 80rpx);
}
}
.message {
padding: 20rpx;
margin-top: 40rpx;
line-height: 3;
text-align: end;
}
/* 解决小程序和app当前界面滚动条不出现的问题 */
::v-deep ::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px !important;
height: 1px !important;
overflow: auto !important;
background: #ccc !important;
-webkit-appearance: auto !important;
display: block;
}
::v-deep ::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px !important;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
background: #ccc !important;
}
::v-deep ::-webkit-scrollbar-track {
/*滚动条里面轨道*/
background: #FFFFFF !important;
}
.area-input {
width: 100%;
height: auto;
position: fixed; // 用的是fixed布局
bottom: 0;
right: 0;
z-index: 1;
padding: 0;
display:flex;
align-items:center;
background-color: #f2f2f2;
}
.icon-mic{
width: 22px;
height: 22px;
padding: 5px 10px;
position: relative;
top: 2px;
}
.textarea {
width: 100%;
font-size: 14px;
padding: 0 10px;
display: inline-block;
margin: 10rpx;
line-height: 48rpx;
position:relative;
top: 0;
background-color: #fff;
border-radius: 16px;
flex: 1;
max-height: 200rpx;
min-height: 60rpx;
}
.send-btn {
font-size: 10px;
background-color: #2196F3;
color: #fff;
margin-right: 10px;
}
本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/ee46703543.html
相关推荐
-
利用Python中selenium库爬虫实现中国裁判文书网自动登录批量下载功能——最新版详细教程！！
目录 工具准备 Chrome浏览器 ChromeDriver驱动 什么是ChromeDriver 下载安装 首先，需要检查Chrome浏览器的版本。请按照以下步骤进行： 请记下这个…
-
【Java】快速排序
文章目录 一、什么是快速排序 二、基准元素的选择 1、选择第一个元素 2、随机选择 三、元素的交换 1、双边循环法 2、单边循环法 一、什么是快速排序 快速排序是由冒泡排序演变而来…
-
2、在vscode上创建第一个C++多文件编译工程（即如何添加task.json和launch.json文件到工程里面）
文章目录 1、新建一个工程目录 2、在vscode打开刚建立的工程目录，建立cpp文件 3、设置C/C++编译的选项:c_cpp_properties.json （1）鼠标点在.c…
-
低版本jdk运行高版本编译jar包失败(class file version 61.0), this version of the Java Runtime class file 52.0
省流：使用jdk1.8执行17编译的包，启动报错。 背景： 项目运行中难免出现服务器环节集成其它jar包的情况，而其它jar包的jdk版本可能和我们业务项目的jdk…
-
Pytorch实现GCN(基于PyTorch实现)
文章目录 前言 一、导入相关库 二、加载Cora数据集 三、定义GCN网络 3.1 定义GCN层 3.1.1 邻接矩阵A 3.1.2 度矩阵D 3.1.3 获取矩阵 D − 1 /…
-
【Java 进阶篇】JDBC插入数据详解
在Java应用程序中，与数据库交互是一项常见的任务。其中，插入数据操作是一种基本的数据库操作之一。本文将详细介绍如何使用Java JDBC（Java Database Connec…
-
Python利用pip安装tar.gz格式的离线资源包
Python利用pip安装tar.gz格式的离线资源包 2023年5月14日 下午7:52 • python 下面是Python利用pip安装tar.gz格式的离线资源包的完整攻略…
-
pytorch实战7：手把手教你基于pytorch实现VGG16
手把手教你基于pytorch实现VGG16（长文） 前言 最近在看经典的卷积网络架构，打算自己尝试复现一下，在此系列文章中，会参考很多文章，有些已经忘记了出处，所以就不贴链接了…
-
eclipse安装和配置环境教程（详细步骤）
一、下载与安装 1. 下载 我们可以在eclipse的官网上直接进行下载，地址如下：https://www.eclipse.org/downloads/ 大家可以选择一个适合自…
-
Oracle：新增字段和注释
创建表 –创建“学生信息”数据表 CREATE TABLE STUDENT_INFO ( STU_ID INT, –学号 STU_NAME VARCHAR2(8), –姓名 …
