lc-lightbox

轮播图组件

注意事项

• 用于在一个页面中展示多个图片
• 可以传入一组图片，滑动显示
• 可以自定义指示器显示

效果

使用方法

<template>
  <div class="wxc-demo">
    <scroller class="scroller">
      <title title="lc-lightbox" class="title"></title>
      <category title="常规轮播"></category>
      
      <lc-lightbox
        autoPlay="true"
        ref="lc-lightbox"
        :border-radius="20"
        height="400"
        interval="5000"
        showIndicator="true"
        :image-list="imageList"
        @lcImgClick="lcImgClick">
      </lc-lightbox>

      <category title="带文字说明"></category>
      <lc-lightbox autoPlay="true" ref="lc-lightbox"
                height="400"
                interval="5000"
                showIndicator="false"
                :image-list="imageList1"
                :imgInfoTextStyle="imgInfoTextStyle"
                @lcImgClick="lcImgClick">
            </lc-lightbox>
    </scroller>
  </div>
</template>

<style scoped>

  .wxc-demo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
  }

  .wrapper {
    align-items: center;
  }

  .scroller {
    flex: 1;
    align-items: center;
  }
</style>
<script>
  import Title from 'lighting-ui/packages/_mods/title.vue';
  import Category from 'lighting-ui/packages/_mods/category.vue';
  import LcLightbox from 'lighting-ui/packages/lc-lightbox';

  export default {
    components: { Title, Category, LcLightbox },
    data: function () {
      return {
        imageList: [
          { src: 'images/banner1.jpg' },
          { src: 'images/banner2.jpg' },
          { src: 'images/banner3.jpg' }
        ],
        imageList1: [
            { 
              src: "images/banner1.jpg",
              imgInfo:"'黑色星期一'后美股强力反弹'\n黑色星期一'后美股强力反弹'\n黑色星期一'后美股强力反弹'\n黑色星期一'后美股强力反弹" },
            { src: "images/banner2.jpg",imgInfo:"中国瘟鸡股市持续暴跌"  }
        ],
        imgInfoTextStyle: {
           color: '#b9f4ec'
        },
      };
    },
    methods: {
      lcImgClick (e) {
        console.log('clicked'+e.index)
      }
    }
  };
</script>

可配置参数

Prop	Type	Required	Default	Description
imageList	Array	Y	[]	显示图片列表（注 1）
height	Number	Y	750	显示图片高度
width	Number	Y	750	显示图片宽度
borderRadius	Number	Y	0	显示图片圆角
autoPlay	Bool	N	false	是否自动播放
interval	Number	N	3000	图片切换时间间隔
infinite	Bool	N	true	是否循环播放
showIndicator	Bool	N	true	是否显示指示器
indicator-color	Object	N	{}	指示器样式配置（注 2）

注 1 中：

{ src: "https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg",imgInfo:"中国瘟鸡股市持续暴跌"  }

• imageList中有imgInfo字段时显示文字说明。
• imgInfoStyle设置文字背景样式。
• imgInfoTextStyle设置文字样式

注 2 中样式：

{'item-color': 'rgba(255, 195, 0, .5)','item-selected-color': '#ffc300','item-size': '20px'}

事件回调

// `@lcImgClick="lcImgClick"`
将会返回 e, type