Question

是否有可能让onsen框架中的轮播无穷无尽？那么当我将最后一个元素向右滚动时，将显示第一个元素？我是以这种方式做到的，但它并不是无脑的：

user_account

感谢您的提示。

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

希望它有所帮助。

无尽的旋转木马与温泉UI

2 个答案: