角滑動劃分類似於在Gmail或Outlook檔案

所以我試圖滑動使用角度滑動div（在iOS中的行上的划動功能）我試過了一些庫，但它並沒有'以實現我所需要的。角滑動劃分類似於在Gmail或Outlook檔案

ngswipeitem
真棒-角滑動
輕掃利

我需要顯示含有上滑動類似於歸檔的歸檔的div在前景

<div ng-repeat="item in items"> 
    <div>{{item.Subject}}</div> 
    <div>Archive</div> <!--this div is hidden and I need to show it on swipe--> 
</div>

來源

2017-06-04 Dany NA

有你牛逼ried https://docs.angularjs.org/api/ngTouch/directive/ngSwipeLeft – user93

@ user93這一個會顯示div，我的問題是在動畫中或滑動所需的div。 –

https://stackoverflow.com/questions/26249373/slide-left-animated-transition-in-ng-hide-ng-animate – user93

我最後使用Hammerjs和Angular Hammer。我的問題是在ng-repeater.I不得不循環所有div。

HTML：

<div class="Swiper" ng-repeat="item in items"> 
    <div>{{item.Subject}}</div> 
    <div class="Page">Archive</div> 
</div>

的CSS：

.Page, 
.Swiper { 
    position: relative; 
    height: 100%; 
} 

.Swiper { 

    overflow: hidden; 
} 

    .Swiper.animate > .Page { 
     transition: all .3s; 
     -webkit-transition: all .3s; 
    } 

.Page { 
    position: absolute; 
    top: 0; 
    left: 0; 

    padding: 0 10px; 
width:100%; 
height:100%; 

    padding-top: 10%; 

}

問題：

var div = document.querySelector('.Swiper'); 
var outer = new HammerCarousel(div, Hammer.DIRECTION_HORIZONTAL, docId);

解決方案：

var divs = document.querySelectorAll('.Swiper'); 
      for (i = 0; i < divs.length; ++i) { 
       var outer = new HammerCarousel(divs[i], Hammer.DIRECTION_HORIZONTAL, docId); 
      }

來源

2017-06-07 09:50:11

角滑動劃分類似於在Gmail或Outlook檔案

回答

相關問題