快应用轮播组件-蒲公英云

快应用轮播组件

<template>
    <div class="carousel-item">
        <swiper indicator="false"
                style="{
   {`height:${height};width:${width};`}}"
                onchange="handleChange"
                index="{
   {index}}"
                interval="{
   {interval}}"
                duration="{
   {duration}}"
                vertical="{
   {vertical}}"
                previousmargin="{
   {previousmargin}}"
                nextmargin="{
   {nextmargin}}"
                loop="{
   {loop}}"
                autoplay="{
   {autoplay}}">
            <div class="carousel-item__image"
                 for="(i,n) in list">
                <image onclick="handleLookDateil(n)"
                       src="{
   {n.src}}"></image>
            </div>
        </swiper>
        <div class="carousel-indicator"
            style="{
   {`margin-top:${distance}px`}}">
            <block for="(i,n) in list">
                <div class="carousel-indicator__item"
                     style="{
   {imageIndex===i?activeStyls:styleStr}}">
                </div>
            </block>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            imageIndex:0
        }
    },
    props: {
        list: {
            type: Array,
            default: [
                {
                    id: "111", //对应的页面id
                    src:`http://img3.imgtn.bdimg.com/it/u=1977473038,4194935805&fm=26&gp=0.jpg` //图片路径
                },
                {
                    id: "222", //对应的页面id
                    src:`http://img2.imgtn.bdimg.com/it/u=3511654728,3153281898&fm=26&gp=0.jpg` //图片路径
                },
                {
                    id: "333", //对应的页面id
                    src:`http://img2.imgtn.bdimg.com/it/u=3511654728,3153281898&fm=26&gp=0.jpg` //图片路径
                },
            ]
        },
        styleStr: {
            type: String,
            default: `width: 40px;height: 5px;background-color: red;`
        },
        activeStyls: {
            type: String,
            default: `width: 40px;height: 5px;background-color: blue;`
        },
        height:{
            type:String,
            default:'300px'
        },
        width:{
            type:String,
            default:'100%'
        },
        index:{
            type:Number,
            default:0
        },
        autoplay:{
            type:Boolean,
            default:false,
        },
        interval:{
            type:Number,
            default:3000
        },
        loop:{
            type:Boolean,
            default:true
        },
        duration:{
            type:Number
        },
        vertical:{
            type:false
        },
        previousmargin:{
            type:String,
            default:'0px'
        },
        nextmargin:{
            type:String,
            default:'0px'
        },
        distance:{
            type:[Number,String],
            default:20
        }
    },
    handleChange(data) {
        this.imageIndex = data.index
    },
    handleLookDateil(n) {
        this.$emit('look', n)
    }
}
</script>
<style lang="less" scoped>
.carousel-item {
  flex-direction: column;
  width: 100%;
  swiper {
    /* height: 200px; */
    .carousel-item__image {
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .carousel-indicator {
    margin-top: 20px;
    justify-content: center;
    align-item: center;
    width: 100%;
    height: 40px;
    .carousel-indicator__item {
      width: 40px;
      height: 5px;
      /* border-radius: 20px; */
      background-color: red;
      margin-right: 10px;
    }
    .active {
      background-color: blue;
    }
  }
}
</style>