角質材料輕掃手勢難以運行

Question

我正在嘗試將swipe功能添加到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> 

在角材料刷卡docpage（https://material.angularjs.org/latest/demo/swipe）似乎很容易，它就像一個魅力。然而，我對該指令的實施似乎並不像應該那樣工作。它讓我選擇元素內的文本而不是滑動。

此外，我寧願要跨度是一個href，但這隻能讓我拖出整個元素的空間。

Answer 1

我相信爲了確保所有重要功能的正確工作，您應該使用它們的容器和指令來代替。所以你應該把所有這些放在一個md內容中，並且在swiped 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和它的作品。順便說一句，如果您使用chrome並使用移動視圖，則總是會觸發md-swipe-left，如果您向左，向右，向上或向下滑動，則無關緊要。

希望這會有所幫助