重寫$ swipe內部方法bind（）事件

所以首先我會告訴我的目標，我試圖實現。我有一個混合應用程序，而滑動操作沒有給出原生應用程序的感覺。就像在本地應用程序中的標籤之間滑動時一樣，您可以看到當前標籤頁的幻燈片以及新標籤進入。它不是非常突兀，如果您不保留原生應用程序中的內容，可以處於您看到第一個標籤的一半和第二個標籤的一半的狀態。（檢查whatsApp標籤中的滑動操作）。

所以現在我使用ngTouch的ngSwipeLeft和ngSwipeRight在那裏，如果我加入任何動畫當滑動完成，這是非常突然和UX是壞的。

如果您通過$swipe的documentation讀那麼有一個swipe行動四個事件：start，move，end和cancel。那麼如何重寫這些事件，以便我可以在流上添加自定義CSS。

那麼，我們如何才能讓滑動事件在此時添加功能。

來源

2017-03-14 arqam

normaly它是非常簡單的。在你自己的監聽器函數中使用'event.preventDefault'和'event.stopPropgination'來停止默認事件。 – mtizziani

@mtizziani但是我想在這4個事件的調用中添加我自己的css功能，而不是停止或任何其他事情。我只是想在這些事件被調用的時候添加一些東西。 – arqam

@arqum你有沒有嘗試過你的css語句巫婆重要的聲明？例如'.classOfSomething {color：red！important; }這告訴css處理它比內聯語句強。也許這可以幫助你，如果你只想操縱css功能。否則你必須使用js事件來停止原始事件，直到完成所有事情，然後調用原始事件。 – mtizziani

所以，雖然我以不同的方式解決我的問題，我將分享如何重寫$swipebind方法。

所以，如果說是創造了一個指令customizableswipe的四種方法可以overriden如下：

angular.module('xpresso') 
.directive('customizableswipe',['$swipe','$window', 
    function($swipe,$window){ 

return { 
    restrict: 'EA', 
    link: function(scope,ele,attrs,ctrl){ 
    var startX,startY; 

    $swipe.bind(ele,{ 
     'start' : function(coords){ 
     console.log("Coord start is :: ",coords.x); 
     }, 
     'move' : function(coords){ 
     console.log("Coord move is :: ",coords.x); 
     }, 
     'end' : function(coords){ 
     console.log("Coord end is :: ",coords.x); 
     }, 
     'cancel' : function(coords){ 
     console.log("Coord cancel is :: ",coords.x); 
     } 
    }); 
    } 
} 
}]);

希望這可以幫助別人:)

來源

2017-04-04 05:53:57 arqam

重寫$ swipe內部方法bind（）事件

回答

相關問題