如何在Ionic应用程序中使用“表情”

Question

在我的Ionic应用程序中，我想在聊天中使用表情素作为笑脸。不幸的是，我没有找到有用的文档来展示如何使用表情素。

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

​

​

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

如何创建这个列表？

Answer 1

经过两天的研究，我没有在网上找到任何答案，所以我自己写了一个清单(其中包含了所有的表情符号及其分类)，并解决了这个问题。

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

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

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

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

我在离子标签中使用了ng-repeat和groupBy滤波器，在角滤波器中使用了角滤波器。

angular-filter:一串适用于AngularJS的有用过滤器

重要：在emoji.json中对每个表情符号classname使用unicode来显示元素的background中的表情符号。

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