03_weex之轮播图组件

1、先建立子组件slider

  <template>
     <div>
     <!-- auto-play="true" interval="3000"  自动轮播 轮播时间 
       具体看官网http://weex.apache.org/cn/references/components/slider.html
        图片必须设置高度
        这里的图片在页面看其实是背景图
        indicator  轮播图指示器   样式设计看css
  -->
        <slider class="sliders" auto-play="true" interval="3000">
            <div v-for="(item,index) in imgList" :key="index">
                <image :src="item.src"  class="home-img"></image>
            </div>
             <indicator class="indicator"></indicator>
        </slider>
    </div>
</template>
<script>
      export default {
            props:['imgList'],  //接收父组件传来的数据
            data() {
                return {
                    list: []
                }
            }
        }

</script>
<style>
    .sliders{
        position:relative;
        width: 750px;
        height: 500px;
    }
    .home-img{
        width: 750px;
        height: 500px;
    }
    .indicator {
        width: 750px;
        height: 80px;
        item-color: #fff;
        item-selected-color: #3B97FF;  //选择的颜色
        item-size: 25px;   //指示器的大小
        position: absolute;
        bottom:0;
        right:0px; 
  }
</style>

2、父组件 index.vue

  <template>
     <div>
       <v-sliders :imgList="list"></v-sliders>
    </div>
</template>
<script>
    import sliders from '../../components/common/slider.vue'
      export default {
          components:{
              "v-sliders":sliders
          },
            data() {
                return {
                    list: [{
                            title: 'item A',
                            src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'
                        },
                        {
                            title: 'item B',
                            src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'
                        },
                        {
                            title: 'item C',
                            src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'
                        }]
                }
            }
        }
</script>
<style>
   
</style>