javascript - Onsen-ui Carousel 属性自动播放不起作用

Question

我在这里使用温泉 UI 我在我的移动网络应用程序中使用轮播，但是这里出现了一些问题，我无法使用属性自动播放。

   <ons-page>
     <ons-toolbar>
     <div class="left">
     <ons-toolbar-button onclick="prev()">
        <ons-icon icon="md-chevron-left"></ons-icon>
      </ons-toolbar-button>
     </div>
     <div class="center">Carousel</div>
     <div class="right">
      <ons-toolbar-button onclick="next()">
        <ons-icon icon="md-chevron-right"></ons-icon>
      </ons-toolbar-button>
      </div>
      </ons-toolbar>

     <ons-carousel fullscreen auto-scroll id="carousel">
     <ons-carousel-item style="background-color: #085078;">
        <div style="text-align: center; font-size: 30px; margin-top: 
       20px; 
      color: #fff;">
        BLUE
      </div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #373B44;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; 
      color: #fff;">
        DARK
      </div>
       </ons-carousel-item>
       <ons-carousel-item style="background-color: #D38312;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; 
         color: #fff;">
        ORANGE
        </div>
        </ons-carousel-item>
       < /ons-carousel>  
       </ons-page>

还有我的 Javascript:

var prev = function() {
       var carousel = document.getElementById('carousel');
       carousel.prev();
};

var next = function() {
       var carousel = document.getElementById('carousel');
       carousel.next();
};

ons.ready(function() {
       var carousel = document.addEventListener('postchange', function(event) {
       console.log('Changed to ' + event.activeIndex)
  });
});

没有出现错误消息，但我的自动播放选项不起作用。

Answer 1

如果你的意思是auto-scroll通过说“自动播放”选项我想你误解了auto-scroll的目标选项并期望轮播将在没有任何用户操作的情况下通过其元素 auto-scroll选项。

来自documentation :

auto-scroll: If this attribute is set the carousel will be automatically scrolled to the closest item border when released.

在 playground 中查看其工作原理.与 auto-scroll当用户想要滑动到轮播中的下一个或上一个元素时的选项，她不需要滑动到最后。部分滑动就足够了，因为这样旋转木马将自动完成滑动。删除 auto-scroll选项，按运行并尝试滑动轮播。您会看到滑动在您松开的地方停止。

所以，auto-scroll不是自动播放。但是究竟如何实现自动播放呢？只需在 next 中使用轮播方法( first 、 getActiveIndex 和 itemCount )和属性( setInterval )功能。

setInterval(function(){ 
  var carousel = document.getElementById('carousel');
  if (carousel.getActiveIndex() === carousel.itemCount-1)
     carousel.first();
  else
     carousel.next(); 
}, 1000);

var prev = function() {
       var carousel = document.getElementById('carousel');
       carousel.prev();
};

var next = function() {
       var carousel = document.getElementById('carousel');
       carousel.next();
};

ons.ready(function() {
       var carousel = document.addEventListener('postchange', function(event) {
       console.log('Changed to ' + event.activeIndex)
  });
});

setInterval(function(){ 
  var carousel = document.getElementById('carousel');
  if (carousel.getActiveIndex() === carousel.itemCount-1)
     carousel.first();
  else
     carousel.next(); 
}, 1000);

<link href="https://unpkg.com/onsenui/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://unpkg.com/onsenui/css/onsenui.css" rel="stylesheet"/>
<script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
  <ons-page>
     <ons-toolbar>
     <div class="left">
     <ons-toolbar-button onclick="prev()">
        <ons-icon icon="md-chevron-left"></ons-icon>
      </ons-toolbar-button>
     </div>
     <div class="center">Carousel</div>
     <div class="right">
      <ons-toolbar-button onclick="next()">
        <ons-icon icon="md-chevron-right"></ons-icon>
      </ons-toolbar-button>
      </div>
      </ons-toolbar>

     <ons-carousel fullscreen id="carousel">
     <ons-carousel-item style="background-color: #085078;">
        <div style="text-align: center; font-size: 30px; margin-top: 
       20px; 
      color: #fff;">
        BLUE
      </div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #373B44;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; 
      color: #fff;">
        DARK
      </div>
       </ons-carousel-item>
       <ons-carousel-item style="background-color: #D38312;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; 
         color: #fff;">
        ORANGE
        </div>
        </ons-carousel-item>
       < /ons-carousel>  
       </ons-page>