uniapp-轮播

<template>
    <view class="content">
            <cu-custom bgColor="bg-gradual-blue">
                <block slot="content">个人技能</block>
            </cu-custom>
            <swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true" previous-margin="20px" next-margin="20px">
                <swiper-item v-for="(item, index) in info" :key="index" >
                    <view :class="item.colorClass" class="swiper-item">
                        <image class="image" :src="item.url" mode="aspectFill" />
                    </view>
                </swiper-item>
            </swiper>
        </view>
</template>

<script>
    export default{
        data() {
            return {
                indicatorDots: true,
                autoplay: true,
                interval: 2000,//切换的间隔时间
                duration: 500,//滑动动画时长
                info: [{
                            colorClass: 'uni-bg-red',
                            url: '/static/image/汽车轮播1.jpg',
                            content: '内容 A'
                        },
                        {
                            colorClass: 'uni-bg-green',
                            url: '/static/image/汽车轮播2.jpg',
                            content: '内容 B'
                        },
                        {
                            colorClass: 'uni-bg-blue',
                            url: '/static/image/汽车轮播3.jpg',
                            content: '内容 C'
                        },
                        {
                            colorClass: 'uni-bg-blue',
                            url: '/static/image/汽车轮播4.jpg',
                            content: '内容 C'
                        },
                        {
                            colorClass: 'uni-bg-blue',
                            url: '/static/image/汽车轮播5.jpg',
                            content: '内容 C'
                        }
                        ],
                    }
                },
                    }
</script>

<style>
    page {
            width: 100%;
            height: 100%;
        }
    
        .content {
            /* text-align: center; */
            height: 100vw;
    
        }
    
        .swiper-box {
            /* width: 95%; */
            height: 200px;
        }
    
        .swiper-item {
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #999;
            color: #fff;
            margin: 10px;
            border-radius: 15upx;
            height: 380upx;
        }
        .image {
            /* width: 750rpx; */
            height: 380upx;
            border-radius: 15upx;
        }
</style>