slider

<slider> 组件用于在一个页面中展示多个图片,在前端,这种效果被称为 轮播图

子组件

支持任意类型的 Weex 组件作为其子组件。 其中,还支持以下组件作为子组件展示特殊效果:

  • <indicator>:用于显示轮播图指示器效果,必须充当 <slider> 组件的子组件使用。

特性

  • auto-play {boolean}:可选值为 true/false,默认的是 false

    该值决定是否自动播放轮播。重置 loadmore 相关的 UI,值不一样就会重置。

  • interval {number}:值为毫秒数,此值设定 slider 切换时间间隔。当 auto-play 值为 true 时生效。

  • infinite {boolean}:循环播放,可选值为 true/false,默认的是 true
  • offset-x-accuracy {number}0.11+:控制onscroll事件触发的频率,默认值为10,表示两次onscroll事件之间Slider Page至少滚动了10px。注意,将该值设置为较小的数值会提高滚动事件采样的精度,但同时也会降低页面的性能。

样式

  • 通用样式:支持所有通用样式

    • 盒模型
    • flexbox 布局
    • position
    • opacity
    • background-color

    查看 组件通用样式

事件

  • change: 当轮播索引改变时,触发该事件。

    事件中 event 对象属性:

    • index:展示的图片索引
    • scroll0.11+: 列表发生滚动时将会触发该事件,事件的默认抽样率为10px,即列表每滚动10px触发一次,可通过属性offset-accuracy设置抽样率。
      体验一下
      事件中 event 对象属性:
    • offsetXRatio {number}:表示当前页面的偏移比例,取值范围为[-1, 1],负值表示向左侧滚动,正值向右。例如,-0.2表示当前item有20%的区域被滚动到slider左侧边界以外,0.3表示当前item有30%的区域被滚动到slider右侧边界以外。
  • 通用事件

    支持所有通用事件:

    • click
    • longpress
    • appear
    • disappear

    查看 通用事件

示例

  1. <template>
  2. <div>
  3. <sliderclass="slider"interval="3000"auto-play="true">
  4. <divclass="frame"v-for="img in imageList">
  5. <imageclass="image"resize="cover" :src="img.src"></image>
  6. </div>
  7. </slider>
  8. </div>
  9. </template>
  10. <stylescoped>
  11. .image {
  12. width:700px;
  13. height:700px;
  14. }
  15. .slider {
  16. margin-top:25px;
  17. margin-left:25px;
  18. width:700px;
  19. height:700px;
  20. border-width:2px;
  21. border-style: solid;
  22. border-color:#41B883;
  23. }
  24. .frame {
  25. width:700px;
  26. height:700px;
  27. position: relative;
  28. }
  29. </style>
  30. <script>
  31. exportdefault{
  32. data (){
  33. return{
  34. imageList:[
  35. { src:'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
  36. { src:'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
  37. { src:'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
  38. ]
  39. }
  40. }
  41. }
  42. </script>

try it