uni-app 表情输入框应采用 absolute 定位表情面板，父容器设 relative 且用 flex 自适应高度，并监听 uni.onkeyboardheightchange 动态调整 bottom；小程序需加 catchtouchstart 阻止冒泡，app 端先调用 uni.hidekeyboard 再显示面板；表情图用雪碧图+css 定位，数据用 computed 分页渲染。
uni-app 表情包输入框怎么接在 input 下方不遮挡？
直接用 textarea + 绝对定位表情面板，是常见但容易出问题的方案。iOS 上软键盘弹起时，textarea 会被顶上去，但自定义表情面板如果用 position: fixed，会脱离视口流、错位甚至消失；Android 则可能因 WebView 渲染差异导致表情面板被键盘盖住。
实操建议：
- 不用
fixed，改用absolute，父容器设position: relative且高度自适应（比如用flex布局把输入区和表情区包在一起） - 监听
uni.onKeyboardHeightChange，动态调整表情面板的bottom值——注意：这个 API 在 H5 不生效，需降级为监听resize或用uni.getSystemInfo预估键盘高度 - 微信小程序真机测试必须开
safe-area-inset-bottom兼容，否则表情面板可能卡在底部安全区外
uni-app 自定义键盘为什么点不到表情图标？
本质是层级（z-index）和事件穿透问题。自定义键盘通常用 view 模拟按钮，但 uni-app 的 input 或 textarea 在某些平台（尤其是 App 端）会强制捕获焦点并拦截底层 touch 事件。
实操建议：
- 给表情图标容器加
catchtouchstart（小程序）或@touchstart.stop（Vue 语法），阻止事件冒泡到输入框 - App 端（iOS/Android）务必关闭
input的focus状态再唤出自定义键盘，否则系统键盘可能抢焦——调用uni.hideKeyboard()后再显示表情面板 - 避免在
input的focus回调里立刻 show 表情面板，会有 100ms 左右延迟，建议用setTimeout微调时机
uni-app 表情数据怎么存、怎么渲染才不卡？
本地加载几百个 emoji 图片（尤其是 PNG）会导致首次点击表情面板卡顿，H5 端更明显。不是图不够小，而是 uni-app 的 image 组件在列表中批量渲染时，每个都触发独立请求和解码。
实操建议：
- 所有表情图合并为一张雪碧图（sprite），用
background-image+background-position定位，CSS 控制尺寸——比单图image渲染快 3 倍以上 - 表情数据用 JSON 存，但别放
data里直接遍历渲染，改用computed分页（比如每页 20 个），配合v-for的使用唯一 id，避免重绘抖动 - App 端慎用 base64 表情图，打包后体积暴涨且无法按需加载；H5 可用，但要压缩到单图 ≤2KB
App 端软键盘收起后表情面板不自动隐藏？
这是最常被忽略的兼容点：iOS App 中，用户点返回键或点击空白处收起系统键盘，uni.onKeyboardHeightChange 不一定触发，blur 事件也未必可靠，导致表情面板“悬在半空”。
实操建议：
- 在页面
onHide和onBackPress钩子中主动this.showEmotionPanel = false - 给整个聊天页加一个透明蒙层（
cover-view，仅 App 支持），监听其touchstart事件来判断是否点到了输入区外——这是目前最稳的“点击收起”方案 - 不要依赖
input的blur，App 端它经常不触发；也不要只监听键盘高度变为 0，部分安卓机型高度回调值不准
真正麻烦的从来不是画出表情面板，而是让它的出现和消失，在三个端（小程序/H5/App）都像原生一样“没感觉”。很多坑不在代码逻辑，而在平台对 focus、keyboard、layer 的隐式处理——得一个个真机试，不能信文档写的“应该”。
