【uni-app】uni-app实现聊天页面功能——功能篇（下）

前言

前面我有写关于如何进行聊天页面布局和实现聊天消息滚动到最底部的文章。

【uni-app】uni-app实现聊天页面功能——功能篇（上）

【uni-app】uni-app实现聊天页面功能（小程序）——布局篇

这篇文章是基于这两篇的基础上完善的。

主要还是实现以下两个功能：

1. 点击聊天框的时候，聊天框随键盘抬起且聊天消息列表滚动到最底部，但整体页面不抬起

2. 聊天框textarea根据内容自适应高度，且聊天消息列表随着聊天框的增高而滚动到最底部（说白了就是最底部的消息不会被增高的聊天框给挡住）

一、聊天框随键盘抬起

uni-app官方文档中其实有给出关于这个的解决方案，只用设置一个属性。

textarea | uni-app官网 (dcloud.net.cn)

textarea的属性：

adjust-position —— 键盘抬起时，是否自动上推页面（默认值为true）

cursor-spacing —— 指定光标与键盘的距离，单位px（就是设置键盘与输入框的距离，默认值为0）

<textarea cursor-spacing = "60"></textarea>

虽然这种方法简单，但是有一个不好的地方是：页面整体会上移

如果想让聊天框随键盘抬起的同时不想让页面上移，可以参考下面这个方法。

思路

首先我们需要在键盘抬起的时候获取到键盘的高度，然后给聊天框动态设置合适的bottom值（键盘的高度），最后给textarea的属性adjust-position设置为false。

至于在点击聊天框的时候聊天消息定位到最底部（不会被遮挡）我将放到第二个板块去讲！！！

---

获取键盘高度采用官方给出的api（最快且稳定的）实现：uni.hideKeyboard() | uni-app官网 (dcloud.net.cn)

我们在页面加载时设置uni.onKeyboardHeightChange监听事件去获取到键盘高度，在页面卸载时使用uni.offKeyboardHeightChange解除监听键盘高度事件。

代码实现

视图部分（简写）：

<template>
	<view class="chat">
		<scroll-view :style="{height: `${windowHeight-keyboardHeight}rpx`}"
		id="scrollview"
		scroll-y="true" 
		:scroll-top="scrollTop"
		:scroll-with-animation="true"
		class="scroll-view"
		>
			<view id="msglistview" class="chat-body">
				...
			</view>
		</scroll-view>
		<!-- 底部消息发送栏 -->
		<view class="chat-bottom">
			<view class="send-msg" :style="{bottom:`${keyboardHeight}rpx`}">
				<view class="uni-textarea">
					<textarea v-model="chatMsg"
					  maxlength="300"
					  confirm-type="send"
                      :adjust-position="false"
                      :show-confirm-bar="false"
					  auto-height ></textarea>
				</view>
				<button @click="handleSend" class="send-btn">发送</button>
			</view>
		</view>
	</view>
</template>

js部分：

data(){
   
    return{
   
        //键盘高度
        keyboardHeight:0,
        // 聊天框距离底部的高度
        bottomHeight: 0,
    }
},	
onLoad(){
   
	uni.onKeyboardHeightChange(res => {
   
        //这里正常来讲代码直接写
        //this.keyboardHeight=this.rpxTopx(res.height)就行了
        //但是之前界面ui设计聊天框的高度有点高,为了不让键盘和聊天输入框之间距离差太大所以我改动了一下。
		this.keyboardHeight = this.rpxTopx(res.height-60)
		if(this.keyboardHeight<0)this.keyboardHeight = 0;
	})
},
onUnload(){
   
	uni.offKeyboardHeightChange