Question

所以我试图使用angular滑动滑动div。（iOS中一行的滑动功能）我尝试了几个库，但它并没有实现我的需要。

ngswipeitem
真棒-角滑动
滑动立

我需要在swipe上显示包含存档的div，类似于outlook

<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>

Answer 1

我最终使用了Hammerjs和Angular Hammer。我的问题出在ng-repeater中。我不得不循环所有的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);
            }

Angular在滑动时滑动div，类似于gmail或outlook中的存档

1 个答案: