加载中...

1.5.4.12.1 indicator

概要

这个组件必须作为slider子组件使用

子组件

该组件不支持子组件

属性

该组件除了通用属性外没有其他的特殊属性

样式

  • item-color 可以使用被命名过的颜色或者十六进制#RRGGBB 格式设置每个item的颜色
  • item-selectedColor 可以使用被命名过的颜色或者十六进制#RRGGBB 格式设置每个item被选中的颜色
  • item-size 设置指示器元素的大小，为float类型值

通用属性参考通用属性

  • 支持 flexbox 相关样式
  • 支持 box model 相关样式
  • 支持 position 相关样式

注意
这里有一些关于样式width和height的特殊细节。对于这个组件的定位不仅与top, left, bottom 和right有关，还与width 和 height的值有关。想象indicator外部有一个虚拟的容器,并且它的width和height继承于indicator，top, left, right 和 bottom 将只会作用于外部的容器，而不是indicator,indicator将会一直位于这个容器的中心位置,并且你要知道的是通常indicator的width 和 height是父组件slider的width 和 height。
注意
background-color是不建议使用在该组件上的,你应该使用item-color 和 item-selectedColor来代替

事件

通用事件:参考通用事件

例子 

<template>
  <div>
    <slider class="slider">
      <div class="slider-pages" repeat="{{itemList}}">
        <image class="img" src="{{pictureUrl}}"></image>
        <text class="title">{{title}}</text>
      </div>

      <indicator class="indicator"></indicator>
    </slider>
  </div>
</template>

<style>
  .img {width: 150; height: 150;}
  .title {flex: 1; color: #ff0000; font-size: 48; font-weight: bold; background-color: #eeeeee;}
  .slider {
    flex-direction: row;
    margin: 18;
    width: 714;
    height: 230;
  }
  .slider-pages {
    flex-direction: row;
    width: 714;
    height: 200;
  }
  .indicator {
    width:714;
    height:200;
    position:absolute;
    top:1;
    left:1;
    item-color: red;
    item-selectedColor: blue;
    item-size: 20;
  }
</style>

<script>
  module.exports = {
    data: {
      itemList: [
        {itemId: '520421163634', title: 'item1', pictureUrl: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
        {itemId: '522076777462', title: 'item2', pictureUrl: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
        {itemId: '522076777462', title: 'iten3', pictureUrl: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
      ]
    }
  }
</script>
还没有评论.