微信小程序添加emoji表情组件，雪碧图版本

最新推荐文章于 2024-07-23 14:44:52 发布

imooos

最新推荐文章于 2024-07-23 14:44:52 发布

阅读量2.5k

点赞数 1

分类专栏：博客示例源码文章标签：小程序表情 emoji

原文链接：https://www.i847.cn/article/63853.html

版权

示例同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

博客

20 篇文章 0 订阅

订阅专栏

源码

12 篇文章 0 订阅

订阅专栏

预览截图：

demo详细代码：https://gitee.com/mosmos_admin/wxemoji

页面引入js：emoji-parser.esm.js

// 表情组件
const emojiParser = require("../components/emoji/emoji-parser.esm");

数据初始化：

data: {
    // 获取表情
    emojis:emojiParser.getEmojis({ size: 30 }),
    // 输入内容
    text:"",
    // 光标位置
    textCursor:0,
    // 用于显示的内容
    textEle:"",
  },

 onLoad() {
    // 设置显示结果的表情大小
    emojiParser.configParseEmoji({ size: 30 })
  },

页面展示：

<view style="width:100%;height:100%;">
  
  <view style="padding:0 20px;">
    <textarea value="{{text}}" bindinput="inputText" bindfocus="textFocus" bindblur="textBlur" placeholder="输入测试"></textarea>
  </view>

  <view style="padding:0 20px;height:200px;overflow:scroll;">
    <block wx:for="{{emojis}}" wx:key="index">
      <view class="emotion_item" data-name="{{item.cn}}" bindtap="textInsertEmoji">
        <view class="icon_emotion" style="{{item.style}}"></view>
      </view>
    </block>
  </view>

  <view style="padding:20px;">
    显示结果：
    <rich-text nodes="{{'<div style=\"white-space: pre-line;\">'+ textEle +'</div>'}}"></rich-text>
  </view>

</view>