android - 如何在 Ionic App 中使用“emojione”

Question

在我的 Ionic App 中，我想在聊天中使用emojione作为笑脸。不幸的是，我没有找到有用的文档来展示如何使用emojione。

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

在下载的文件中，有笑脸的png精灵和它的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和 angularng-repeat和groupBy过滤器

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

重要提示：对每个表情符号使用unicodeIn以在元素中显示表情符号（尽管如此）。emoji.jsonclassnamebackground

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;
};