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