weex 轮播图

 

<indicator>

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

子组件

<indicator> 组件没有任何子组件。

样式

<indicator> 组件有一些私有样式，如下：

• item-color {color}：indicator指示点未被选中时的颜色，默认值为 #CCCCCC

• item-selected-color {color}：indicator指示点被选中时的颜色，默认值为 #444444

• item-size {number}：指示点的半径，默认为 5px

• 通用样式

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

  查看 组件通用样式

注意 1：

这里需要注意一点，<indicator> 的 position 不仅依赖 top、left、bottom 和 right 样式，同时会参考 width 和 height 样式。<indicator> 默认的宽高继承于 <slider>，如果<slider> 未设置宽高，需要显式的给 <indicator> 设置宽高值。

注意 2：

background-color 不推荐使用，建议使用 item-color 和 item-selected-color 代替。

事件

支持所有通用事件。

• click
• longpress
• appear
• disappear

查看 通用事件

<template>
    <div>
        <slider class="slider" interval="3000" auto-play="true" >
            <div class="frame" v-for="img in imageList">
                <image class="image" resize="cover" :src="img.src"></image>
            </div>
            <indicator class="indicator"></indicator>
        </slider>
    </div>
</template>

<script>
export default {
  data () {
    return {
      imageList: [
        { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
        { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
        { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}]
    }
  }
}
</script>

<style scoped>
    .image{
        width: 700px;
        height: 700px;
    }
    .slider{
        margin-top: 25px;
        margin-left: 25px;
        width: 700px;
        height: 700px;
        border-width:2px ;
        border-style: solid;
        border-color: #41B883;
    }
    .frame{
        width: 700px;
        height: 700px;
        position: relative;
    }
    .indicator{
        width: 700px;
        height: 700px;
        item-color:#ffffffff;
        item-selected-color:red;
        size: 25px;
        top: 200px;
        position: absolute;
    }

</style>