快应用轮播组件

╰+哭是因爲堅強的太久メ 2023-07-16 02:32 16阅读 0赞

<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>