当前位置: 首页 > 文档资料 > BUI-Weex 开发手册 >

开发手册 - 图片轮播(bui-image-slider)

优质
小牛编辑
125浏览
2023-12-01

图片轮播(bui-image-slider)

图片轮播(bui-image-slider) - 图1   图片轮播(bui-image-slider) - 图2

用法

  1. <bui-image-slider :items="itemList"
  2. @itemClick="onItemClick"
  3. @change="onChange">
  4. </bui-image-slider>
  1. data () {
  2. return {
  3. itemList: [
  4. {
  5. url: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'
  6. },
  7. {
  8. url: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'
  9. },
  10. {
  11. url: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'
  12. },
  13. {
  14. url: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'
  15. }
  16. ]
  17. }
  18. },
  19. methods: {
  20. //图片切换时候的事件
  21. onChange(e) {
  22. console.log(e);
  23. },
  24. //点击图片的事件
  25. onItemClick(e, index) {
  26. this.$toast(index);
  27. }
  28. }

Example: bui-image-slider

属性

PropTypeRequiredDefaultDescription
itemsarrayY显示的图片数组
intervalnumberN6000图片切换的间隔时间,单位ms
autoplaybooleanNtrue设置是否自动播放
infinitebooleanNtrue设置是否循环播放
imgResizestringNstretch设置图片的resize属性
imgWidthnumberN750图片宽度
imgHeightnumberN750图片高度
placeholderstringN默认图片
indicatorStyleobjectN小圆圈指示器扩展样式
sliderStyleobjectN容器扩展样式
  • items: 进行轮播的图片对象,每个json对象必须要包含一个 url 字段
  • imgResize: 设置图片的resize属性,
    • stretch:默认值,指定图片按照容器拉伸,有可能使图片产生形变。
    • cover:指定图片可以被调整到容器,以使图片完全覆盖背景区域,图片有可能被剪裁。
    • contain:指定可以不用考虑容器的大小,把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

事件

  • @change: 当轮播索引改变时,触发该事件。 请参考:Slider 的change事件
  • @itemClick: 点击某张图片时候,触发该事件。返回event对象 和当前图片索引.