如何在 Ionic App 中使用 "emojione"

Question

在我的 Ionic 应用程序中，我想使用 emojione for smiley in chat. Unfortunately, I didn't find useful documentation to show how to use emojione。

现在我想创建一个包含所有笑脸列表及其相关组的弹出窗口。 像这样：

在下载的文件中，有 png sprite 的笑脸，它是 css 文件，但是没有HTML 显示笑脸列表的文件。

如何创建此列表？

Answer 1

经过两天的研究，我没有在网上找到任何答案，所以，我自己写了一个列表（包含所有表情符号及其类别）并解决了问题。

在 emojione.com 的下载文件夹中，有一些我用来创建列表的文件：

1. emojione.sprites.css 包含 background-position 和 classname

2。 emojione.sprites.png这是所有表情符号的精灵图

3。 emoji.json 包含所有表情符号名称、类别、unicode 和...

我用了ionic tab and angular ng-repeat and groupBy filter in angular-filter

angular-filter: Bunch of useful filters for AngularJS

重要提示： 使用 unicode In emoji.json 为每个表情符号 classname 在元素的 background 中显示表情符号（恶意）。

HTML

<div class="emoji-wrapper">

    <div class="tabs">
       <a ng-repeat="(key, value) in emojies | groupBy:'category'" class="tab-item" ng-click="changeTab($index)">
          {{key}}
       </a>
     </div>

     <div ng-repeat="(key, value) in emojies | groupBy:'category'" id="{{key}}" ng-show="tabActive[$index]">
         <ul>
            <li ng-repeat="emoji in value">
                 <span class="emojione emojione-{{emoji.unicode}}"></span>
            </li>
         </ul>
     </div>

</div>

JS

$scope.emojies = [];
$scope.tabActive = [];
$scope.tabActive[0] = true;

$http.get("emoji.json").then(function (response) {

    angular.forEach(response.data , function ($elem , $index) {
       $scope.emojies.push($elem);
    });

});

$scope.changeTab = function (index) {
    $scope.tabActive = [];
    $scope.tabActive[index] = true;
};

如何在 Ionic App 中使用 "emojione"

How to use "emojione" in Ionic App

android

emoji

angularjs

ionic-framework

emojione