更新记录

2.0.0（2021-06-19）

新增更多表情-

几乎全端支持--但是没完全支持！

app或者小程序

手机里面没有对应的字库或者字体就会显示不完全！在浏览器上显示率99%

1.0.0（2019-09-21）

表情库

平台兼容性

各端通用表情

使用方法

import emoji from "../static/emoji";

分解成二维数组-方便显示

var page = Math.ceil(emoji.length/21);
    for (let i = 0; i < page; i++) {
    this.emojiData[i] = [];
    for (let k = 0; k < 21; k++) {
        emoji[i*21+k]?this.emojiData[i].push(
        emoji[i*21+k]
        ):''
    }
} 

放入轮播图里面

<swiper class="slider" :current="emojiData.length-1">
    <swiper-item v-for="(item, key) in emojiData" :key="key" class="slider-emoji" :class="[key==emojiData.length-1?'lastbox':'']">
        <text v-for="(emoji, index) in item" :key="index" @click="selemoji(emoji)" class="slider-emoji-icon">{{ emoji }}</text>
    </swiper-item>
</swiper>

基本样式

.slider {
    width: 375;
    height: 128;
    &-emoji {
        width: 375;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content:center;
        &-icon {
            width: 53%;
            text-align: center;
            padding: 10.5 0;
        }
    }
}
<!-- 设置最后一列左靠齐 -->
.lastbox{
    justify-content: flex-start;
}

点击回调--图标

selemoji(m) {
    console.log(m);
}

下面只是一部分-第一列