Question

目前我正在项目中使用Ionic Tinder Cards 2。这是它的Github页面：Ionic Tinder Cards 2

我遇到的问题是：当我向活动卡阵列（应该在HTML视图中显示的卡阵列）中添加太多卡时，卡堆会中断。我已经制作了一个Codepen，希望能更好地解释这一点：Codepen for the "breaking" example

如果你，在这个代码中，只是试着轻轻拖动堆栈中的第一张卡片，你会看到我的意思。好像，当堆栈太长时，它会开始在底部被镜像。

我不确定Ionic插件中的代码会导致这种情况，但我试图通过尝试仅显示整个数组的子集来解决此问题。也就是说，我不想尝试加载我拥有的所有30张图像，而只是想一次显示10张图像。我尝试通过Angular这样做：

<div ng-if="cards.active">
<td-cards>
    <td-card ng-repeat="card in cards.active|limitTo:9" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)">
        <div class="image">

            <div class="no-text"><i class="icon_close_alt2"></i></div>
            <div class="yes-text"><i class="icon_circle-empty"></i></div>

            <img ng-src="{{ card.image }}">
        </div>
    </td-card>
    <td-card id="end-card" drag="false">
        <i class="icon ion-ios-close"></i>
    </td-card>
</td-cards>

即，通过尝试设置＆＃34; limitTo＆＃34;修改器，以便从卡阵列一次只显示9张牌（当你超过9张牌时，它似乎会中断）。不幸的是，这似乎带来了一个问题，即一旦你开始到达9指数标记以上的卡片，滑动功能就会停止工作。好像卡阵列的这种动态工作根本不起作用。

如果有人有兴趣，这是我在Ionic Controller中使用的Javascript，用于将卡添加到＆＃34;活动卡＆＃34;阵列：

var poemCardStack = JSON.parse(window.localStorage.getItem("unlikedPoems"));

$scope.cards = {
master: Array.prototype.slice.call(poemCardStack, 0),
active: Array.prototype.slice.call(poemCardStack, 0),
discards: [],
liked: [],
disliked: []
}

我只需将一组图像文件路径加载到数组中，然后将其链接到＆＃34; active＆＃34;卡阵列。这部分我知道有效。

接下来的问题是，我将如何解决这个镜像问题，以便即使使用大数组，卡片堆也会继续淡入背景，或者如何在整个数组中只显示一个子集？

谢谢大家的帮助：）

Ionic Tinder Cards 2 - 卡阵列中的卡太多会破坏卡堆栈视图

0 个答案: