输入框调整
This commit is contained in:
parent
781c8803a8
commit
b91723e561
@ -15,6 +15,7 @@ $primary-color: #0877F1;
|
||||
flex-direction: column;
|
||||
background-color: #f5f5f5;
|
||||
overflow: hidden;
|
||||
transition: padding-bottom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/* 患者信息栏样式 */
|
||||
@ -124,6 +125,7 @@ $primary-color: #0877F1;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transition: bottom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.chat-content-compressed {
|
||||
@ -398,6 +400,8 @@ $primary-color: #0877F1;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
flex-shrink: 0;
|
||||
transform: translateZ(0); /* 开启硬件加速,提升性能 */
|
||||
transition: bottom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: bottom;
|
||||
}
|
||||
|
||||
.input-toolbar {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="input-section">
|
||||
<view class="input-section" :style="{ bottom: props.keyboardHeight + 'px' }">
|
||||
<view class="input-toolbar">
|
||||
<view @click="toggleVoiceInput" class="voice-toggle-btn">
|
||||
<image v-if="showVoiceInput" src="/static/jianpan.png" class="voice-toggle-icon" mode="aspectFit"></image>
|
||||
@ -8,7 +8,7 @@
|
||||
<view class="input-area">
|
||||
<textarea v-if="!showVoiceInput" class="text-input" v-model="inputText" placeholder="我来说两句..."
|
||||
@confirm="sendTextMessage" @focus="handleInputFocus" @input="handleInput"
|
||||
:auto-height="true" :show-confirm-bar="false" :adjust-position="false" :cursor-spacing="40" />
|
||||
:auto-height="true" :show-confirm-bar="false" :adjust-position="false" />
|
||||
<input v-else class="voice-input-btn" :class="{ recording: isRecording }" @touchstart="startRecord"
|
||||
@touchmove="onRecordTouchMove" @touchend="stopRecord" @touchcancel="cancelRecord" :placeholder="isRecording ? '松开发送' : '按住说话'" disabled>
|
||||
</input>
|
||||
@ -77,6 +77,7 @@ const props = defineProps({
|
||||
groupId: { type: String, default: '' },
|
||||
userId: { type: String, default: '' },
|
||||
corpId: { type: String, default: '' },
|
||||
keyboardHeight: { type: Number, default: 0 },
|
||||
});
|
||||
|
||||
// Emits
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
<!-- 聊天消息区域 -->
|
||||
<scroll-view
|
||||
class="chat-content"
|
||||
:style="{ bottom: (keyboardHeight > 0 ? keyboardHeight + 120 : 120) + 'px' }"
|
||||
scroll-y="true"
|
||||
enhanced="true"
|
||||
bounces="false"
|
||||
@ -147,6 +148,7 @@
|
||||
"
|
||||
:userId="openid"
|
||||
:corpId="corpId.value"
|
||||
:keyboardHeight="keyboardHeight"
|
||||
@scrollToBottom="() => scrollToBottom(true)"
|
||||
@messageSent="() => scrollToBottom(true)"
|
||||
/>
|
||||
@ -450,7 +452,17 @@ onLoad((options) => {
|
||||
// 监听键盘高度变化
|
||||
uni.onKeyboardHeightChange((res) => {
|
||||
console.log("键盘高度变化:", res.height);
|
||||
const oldHeight = keyboardHeight.value;
|
||||
keyboardHeight.value = res.height;
|
||||
|
||||
// 键盘弹出时(从0变为非0),自动滚动到底部
|
||||
if (oldHeight === 0 && res.height > 0) {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
scrollToBottom(true);
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
checkLoginAndInitTIM();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user