81 lines
2.3 KiB
Markdown
81 lines
2.3 KiB
Markdown
|
# 造梦页面 - 虚拟键盘适配功能
|
|||
|
|
|
|||
|
|
## 功能说明
|
|||
|
|
|
|||
|
|
当用户在造梦页面的创造模式中输入文字时，虚拟键盘会弹起。为了避免上传组件被键盘遮挡，实现了以下适配方案：
|
|||
|
|
|
|||
|
|
### 适配方案
|
|||
|
|
|
|||
|
|
1. **键盘监听**
|
|||
|
|
- 使用 `uni.onKeyboardHeightChange` 监听虚拟键盘的显示和隐藏
|
|||
|
|
- 实时获取键盘高度，判断键盘是否可见
|
|||
|
|
|
|||
|
|
2. **响应式布局变化**
|
|||
|
|
- **键盘未弹起时**：上传组件显示为大型卡片样式，位于内容区域中央
|
|||
|
|
- **键盘弹起时**：
|
|||
|
|
- 隐藏大型上传卡片
|
|||
|
|
- 在输入框右上角显示紧凑的长方形上传按钮
|
|||
|
|
- 输入框自动为上传按钮留出空间（右侧 padding）
|
|||
|
|
|
|||
|
|
3. **视觉效果**
|
|||
|
|
- 紧凑上传按钮采用圆角矩形设计
|
|||
|
|
- 包含图标和"上传"文字
|
|||
|
|
- 带有滑入动画效果
|
|||
|
|
- 点击时有缩放反馈
|
|||
|
|
|
|||
|
|
## 技术实现
|
|||
|
|
|
|||
|
|
### 状态管理
|
|||
|
|
```javascript
|
|||
|
|
const keyboardHeight = ref(0) // 键盘高度
|
|||
|
|
const isKeyboardVisible = ref(false) // 键盘是否可见
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 键盘监听
|
|||
|
|
```javascript
|
|||
|
|
const setupKeyboardListener = () => {
|
|||
|
|
uni.onKeyboardHeightChange((res) => {
|
|||
|
|
keyboardHeight.value = res.height
|
|||
|
|
isKeyboardVisible.value = res.height > 0
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const removeKeyboardListener = () => {
|
|||
|
|
uni.offKeyboardHeightChange()
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 生命周期
|
|||
|
|
- `onShow`: 设置键盘监听器
|
|||
|
|
- `onHide`: 移除键盘监听器
|
|||
|
|
|
|||
|
|
### 条件渲染
|
|||
|
|
- 大型上传卡片：`v-if="isExpanded && !isKeyboardVisible"`
|
|||
|
|
- 紧凑上传按钮：`v-if="isKeyboardVisible && canAddMoreImages"`
|
|||
|
|
|
|||
|
|
## 样式特点
|
|||
|
|
|
|||
|
|
### 紧凑上传按钮
|
|||
|
|
- 位置：绝对定位在输入框右上角
|
|||
|
|
- 尺寸：自适应内容，紧凑设计
|
|||
|
|
- 颜色：深色背景 (#3f3f46)，与整体风格一致
|
|||
|
|
- 动画：滑入效果 (slideInRight)
|
|||
|
|
- 交互：点击缩放反馈
|
|||
|
|
|
|||
|
|
### 输入框适配
|
|||
|
|
- 动态 padding-right：当上传按钮显示时自动调整
|
|||
|
|
- 平滑过渡：使用 CSS transition
|
|||
|
|
|
|||
|
|
## 用户体验
|
|||
|
|
|
|||
|
|
1. **无缝切换**：键盘弹起/收起时，上传功能始终可用
|
|||
|
|
2. **空间优化**：键盘弹起时最大化利用可见区域
|
|||
|
|
3. **视觉连贯**：保持统一的设计语言
|
|||
|
|
4. **操作便捷**：上传按钮始终在易于点击的位置
|
|||
|
|
|
|||
|
|
## 兼容性
|
|||
|
|
|
|||
|
|
- 支持 uni-app 的所有平台
|
|||
|
|
- 特别优化移动端体验
|
|||
|
|
- 自动适配不同尺寸的虚拟键盘
|