用scroll-view实现表情面板需设scroll-x="true"、父容器固定宽高、内部view加display:inline-block和white-space:nowrap；插入表情靠input的cursor属性拼接字符串；iOS错位用flex布局替代inline-block解决。
uni-app里表情面板怎么用scroll-view实现平滑滚动
直接用scroll-view做表情面板最稳妥，比swiper更可控、不卡顿、支持手指拖拽惯性滚动。关键不是“能不能”，而是scroll-view必须设scroll-x="true"且父容器固定宽高，否则内容会塌缩或无法横向滚动。
常见错误是没给scroll-view加white-space: nowrap，导致表情图标自动换行；或者忘了给内部view加display: inline-block，结果所有表情挤成一列。
-
scroll-view外层容器需设width和height（比如100rpx高），不能靠内容撑开 - 内部每个表情
view要加display: inline-block+vertical-align: top - 禁用默认滚动条：加
show-scrollbar="false"，不然iOS上会闪出原生滚动条 - 如果用
v-for渲染表情，确保数据是扁平数组，别嵌套两层——scroll-view只认一级子元素
表情图标点击后怎么插入到输入框光标位置
uni-app没有document.execCommand，也不能直接操作textarea的selectionStart，得靠input组件的cursor属性配合字符串拼接来模拟。
核心逻辑是：先记录当前输入框的cursor值，再把表情符号插进value对应位置，最后重置cursor到新位置。难点在于微信表情通常是[微笑]这类文本标记，不是图片URL，所以必须走纯文本插入路径。
- 绑定
input的@focus事件，存下当前cursor值到data中 - 点击表情时，用
value.slice(0, cursor) + '[微笑]' + value.slice(cursor)拼新字符串 - 更新
value后，立刻用this.$nextTick(() => { this.cursor = 新光标位置 })重设光标 - 别用
textarea组件——它不支持cursor控制；必须用input并设type="text"
本地表情包怎么按分类分页加载，避免首屏卡顿
一次性加载几十个表情图标+分类tab，在低端安卓机上会明显掉帧。实际做法是分页懒加载：每个分类的数据单独请求，只在tab切换时才拉对应JSON，图标资源用require动态引入。
注意uni-app的require不支持变量路径，所以表情路径得写死在JSON里，或者用uni.getImageInfo预加载，但后者成本高。更轻量的做法是把所有表情图放在static目录，用相对路径写进配置。
- 分类配置用JSON文件放
static/emojis/下，例如emoji-tab1.json，内容含list: [{name: '微笑', path: '/static/emojis/1.png'}] - tab切换时
uni.loadFile读取对应JSON（注意H5端要用require，App端可用uni.loadFile） - 图标
image的src直接写item.path，别拼base64——体积大、解码慢 - 首次打开面板时，默认只加载第一个分类，其他分类数据留空，等用户点再触发
为什么emoji在iOS上显示错位或被截断
根本原因是iOS的scroll-view对inline-block元素的行高计算异常，尤其当图标是image标签时，自带vertical-align: baseline，导致上下留白不一致。
不是样式没写全，而是iOS Webview对line-height和vertical-align的解析和Android不同。最简单有效的解法是统一用flex布局替代inline-block，哪怕牺牲一点兼容性（uni-app 2.7+已稳定支持）。
- 把
scroll-view内部容器设为display: flex，子项用flex: 0 0 auto控制不伸缩 - 每个表情
image加vertical-align: top+align-self: flex-start - 禁用
scroll-view的enhanced属性（H5端开启后反而加剧错位） - 真机调试务必用iOS 15+，老系统对
flex支持差，宁可降级用inline-block加line-height: 0硬压
表情面板真正的复杂点不在布局，而在光标同步和跨端渲染一致性。iOS上改一个vertical-align可能影响所有分类的对齐，Android上又得额外处理scroll-view的回弹阻尼。这些细节没法抽象成组件库，只能在每个项目里实测调。
