无尽的温泉旋转木马 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

只需为轮播提供功能和属性 overscroll 即可：

<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中的button :

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

希望对您有所帮助。

无尽的温泉旋转木马 UI

Endless carousel with Onsen UI

onsen-ui