Angular Material 滑动手势几乎不起作用

Question

我正在尝试将滑动功能添加到 ng 重复的元素列表中。但是，刷卡效果不佳。有时可以识别滑动手势（全部在桌面上），但大多数时候我像疯子一样点击和滑动以达到预期的效果。

我正在使用 Material Angular。

代码：

 <div ng-repeat="link in Links |  filter: { category: 'quick' }">
    <div ng-show="!link.show" md-swipe-left="link.show = true">
        <div class="lv-item ">
            <span href="{{link.url}}" class="no-select" target="_blank" >
                <div class="lv-title" class="no-select">{{link.title}}</div>
                    <small class="lv-small" class="no-select">{{link.description}}</small>
            </span>
            </div>
        </div>
        <div ng-show="link.show" md-swipe-right="link.show = false">
            <div class="lv-item delete" >
                <button ng-click="deleteLink(link.id)">Verwijder</button>
            </div>  
        </div>
</div>

在 Angular Material swipe 文档页面 (https://material.angularjs.org/latest/demo/swipe) 上，它看起来很简单，而且效果很好。但是，我对该指令的实施似乎没有按应有的方式工作。它让我选择元素内的文本而不是滑动。

另外，我更希望 span 是一个 href，但这只能让我将整个元素拖出空间。

Answer 1

我认为，为了确保所有材料功能的正常工作，您应该改用它们的容器和指令。所以你应该把所有这些都放在一个 md-content 中，并在滑动的 div 上使用 ng-ifs 而不是 ng-show。这会导致类似的结果：

<md-content>
  <div ng-repeat="link in Links |  filter: { category: 'quick' }">
    <div ng-if="!link.show" md-swipe-left="link.show = true">
        <div class="lv-item ">
            <span href="{{link.url}}" class="no-select" target="_blank" >
                <div class="lv-title" class="no-select">{{link.title}}</div>
                    <small class="lv-small" class="no-select">{{link.description}}</small>
            </span>
        </div>
    </div>
    <div ng-if="link.show" md-swipe-right="link.show = false">
        <div class="lv-item delete" >
            <button ng-click="deleteLink(link.id)">Verwijder</button>
        </div>  
    </div>
  </div>
</md-content>

我在一些 md-sidenav 上使用了这种代码 sn-p，它可以工作。顺便说一句，如果您使用 chrome 并使用移动视图，md-swipe-left 总是被触发，无论您向左、向右、顶部还是底部滑动都无关紧要。

希望对你有帮助