carousel

轮播图。

<carousel> 标签内可包含多条 <carousel-item>，适合轮播图展示。

属性

属性名类型默认值说明
autoplayBooleanfalse是否自动切换
currentNumber0当前所在滑块的索引值
intervalNumber5000自动切换的时间间隔
circularBooleanfalse是否采用衔接滑动
indicator-dotsBooleanfalse是否显示面板指示点
indicator-colorColor#cccccc指示点颜色
indicator-active-colorColor#000000当前选中的指示点颜色
changeEventHandlecurrent 改变时会触发 change 事件，event.detail = {current: activeIndex}

示例

  1. <template>
  2.   <view>
  3.     <carousel class="container" indicator-dots="{{true}}"  current="{{1}}" circular="{{true}}">
  4.       <carousel-item>
  5.         <view class="carousel-item" style="background-color: #EBDEAA"></view>
  6.       </carousel-item>
  7.       <carousel-item>
  8.         <view class="carousel-item" style="background-color: #E3EDCD"></view>
  9.       </carousel-item>
  10.       <carousel-item>
  11.         <view class="carousel-item" style="background-color: #EAEAEF"></view>
  12.       </carousel-item>
  13.     </carousel>
  14.   </view>
  15. </template>
  16. <script>
  17.   class Carousel {}
  19.   export default new Carousel();
  20. </script>
  21. <style scoped>
  22. .container {
  23.   height: 300cpx;
  24. }
  25. .carousel-item {
  26.   height: 300cpx;
  27.   width: 750cpx;
  28. }
  29. </style>
  30. <script cml-type="json">
  31. {
  32.     "base": {
  33.         "usingComponents": {}
  34.     }    
  35. }
  36. </script>

carousel - 图1wx

carousel - 图2web

carousel - 图3native

Bug & Tip

  • 如需兼容安卓端，carousel需要有一个固定高度。