無盡的旋轉木馬與溫泉UI

Question

是否有可能使溫泉框架中的旋轉木馬無止境？所以當我向右滾動最後一個元素時，第一個元素將被顯示？ 我那樣做了，但它不是無縫：

ons.ready(function() { 
    carousel.on("overscroll", function (event) { 
     if (event.direction == "right") { 
      carousel.first(); 
     } else { 
      carousel.last(); 
     } 
    }); 
}); 

謝謝你的提示。

Answer 1

我的想法是在兩端添加一個額外的克隆ons-carousel-item，這樣我可以在到達任何一端時用中間的另一個替換當前的幻燈片。無論如何，它都適用於webkit瀏覽器。

ons.bootstrap() 
 
.controller('AppCtrl', function($scope, $timeout){ 
 
    $timeout(function(){ 
 
    $scope.carousel.on('postchange', function(event){ 
 
     if(event.activeIndex === 0){ 
 
     $scope.carousel.setActiveCarouselItemIndex(4, {animation: 'none'}); 
 
     } 
 
     else if(event.activeIndex === 5){ 
 
     $scope.carousel.setActiveCarouselItemIndex(1, {animation: 'none'}); 
 
     } 
 
    }); 
 
    }); 
 
});

ons-carousel-item { 
 
    display: table; 
 
    text-align: center; 
 
} 
 
.item-label { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    color: white; 
 
    line-height: 1; 
 
    font-size: 48px; 
 
    font-weight: bold; 
 
} 
 
.cover-label { 
 
    text-align: center; 
 
    position: absolute; 
 
    left: 0px; 
 
    width: 100%; 
 
    bottom: 10px; 
 
    color: white; 
 
}

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.14/build/css/onsen-css-components.css" rel="stylesheet"/> 
 
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.14/build/css/onsenui.css" rel="stylesheet"/> 
 
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.14/build/js/angular/angular.min.js"></script> 
 
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.14/build/js/onsenui.min.js"></script> 
 

 
    <ons-page ng-controller="AppCtrl"> 
 
    <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel" initial-index="1"> 
 
     <ons-carousel-item style="background-color: #D38312;"> 
 
     <div class="item-label">D</div> 
 
     </ons-carousel-item> 
 
     <ons-carousel-item style="background-color: gray;"> 
 
     <div class="item-label">A</div> 
 
     </ons-carousel-item> 
 
     <ons-carousel-item style="background-color: #085078;"> 
 
     <div class="item-label">B</div> 
 
     </ons-carousel-item> 
 
     <ons-carousel-item style="background-color: #373B44;"> 
 
     <div class="item-label">C</div> 
 
     </ons-carousel-item> 
 
     <ons-carousel-item style="background-color: #D38312;"> 
 
     <div class="item-label">D</div> 
 
     </ons-carousel-item> 
 
     <ons-carousel-item style="background-color: gray;"> 
 
     <div class="item-label">A</div> 
 
     </ons-carousel-item> 
 
     <ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover> 
 
    </ons-carousel> 
 
    </ons-page>

Answer 2

只要給功能和反彈時屬性爲您的旋轉木馬：

<ons-carousel var="carousel" ons-overscroll="over($event.activeIndex)" swipeable .... 

，並在你的控制器：

$scope.over = function(idx) { if(idx==0){carousel.last();}else{carousel.first();} } 

它也可以實現到按鈕例如在ons-carousel-cover上：

<ons-carousel-cover> 
    <div class="cover-label"> 
     <ons-button modifier="quiet" ng-click="prev(carousel.getActiveIndex());"> prev </ons-button> 
     Swipe left or right 
     <ons-button modifier="quiet" ng-click="next(carousel.getActiveIndex());;"> next </ons-button> 
    </div> 
</ons-carousel-cover> 

並在控制器（例如4轉盤的項{MAX_INDEX = 3}）：

$scope.prev = function(idx) { if(idx==0){carousel.last();}else{carousel.prev();} } 
$scope.next = function(idx) { if(idx==3){carousel.first();}else{carousel.next();} } 

CSS美容：

.cover-label { 
    text-align: center; 
    position: absolute; 
    left: 0px; 
    width: 100%; 
    bottom: 10px; 
    color: white; 
} 

希望它幫助。