当前位置：首页 > uni-app

uniapp表情包实现

2026-02-06 14:55:06uni-app

uniapp表情包实现方法

在uniapp中实现表情包功能，通常涉及表情选择面板的展示、表情数据的处理以及与输入框的交互。以下是具体的实现步骤：

表情数据准备

创建一个表情数据数组，包含表情的编码和对应的图片资源路径。例如：

uniapp表情包实现

const emojiList = [
  { code: 'smile', src: '/static/emoji/smile.png' },
  { code: 'cry', src: '/static/emoji/cry.png' },
  // 更多表情...
]

表情选择面板布局

使用<scroll-view>组件横向滚动展示表情，每个表情用<image>组件显示：

<scroll-view scroll-x class="emoji-container">
  <view v-for="(item, index) in emojiList" :key="index" @tap="insertEmoji(item)">
    <image :src="item.src" mode="aspectFit" class="emoji-icon"></image>
  </view>
</scroll-view>

表情插入逻辑

通过点击事件将表情代码插入输入框光标位置：

uniapp表情包实现

methods: {
  insertEmoji(item) {
    const inputValue = this.inputMsg
    const cursorPos = this.cursorPosition
    this.inputMsg = inputValue.slice(0, cursorPos) + `[${item.code}]` + inputValue.slice(cursorPos)
  }
}

表情渲染处理

在显示消息内容时，将表情代码替换为对应的图片：

<view class="message-content">
  <template v-for="(part, index) in parsedMessage">
    <image v-if="part.type === 'emoji'" :key="index" :src="getEmojiSrc(part.code)" class="message-emoji"/>
    <text v-else :key="index">{{ part.text }}</text>
  </template>
</view>

样式调整

确保表情图标大小合适，滚动容器高度固定：

.emoji-container {
  white-space: nowrap;
  height: 200rpx;
  background: #f5f5f5;
}
.emoji-icon {
  width: 80rpx;
  height: 80rpx;
  display: inline-block;
  margin: 10rpx;
}