如何在 Ionic App 中使用“emojione”

Question

在我的 Ionic 应用程序中，我想在聊天中使用 emojione 表示笑脸。不幸的是，我没有找到有用的文档来说明如何使用 emojione。

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

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

如何创建此列表？

Answer 1

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

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

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

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

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

我在angular-filter 中使用了ionic tab 和角度ng-repeat 和groupBy 过滤器

angular-filter: AngularJS 的一组有用的过滤器

重要提示：在emoji.json 中为每个表情符号classname 使用unicode 以在元素的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;
};