Vue:uni-app学习（三）--幻灯播放

Vue:uni-app学习（三）--幻灯播放

 

<template>
    <view>
        <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
            <swiper-item>
                <view class="swiper-item uni-bg-red">A</view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item uni-bg-green">B</view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item uni-bg-blue">C</view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                indicatorDots: true,
                autoplay: true,
                interval: 2000,
                duration: 500
            }
        },
        methods: {
            
        }
    }
</script>

<style>
    .swiper{
        width: 100%;
        height: 300rpx;
    }
    .swiper-item{
        width: 100%;
        height: 100%;
    }
    .uni-bg-red{
        background-color: red;
    }
    .uni-bg-green{
        background-color: green;
    }
    .uni-bg-blue{
        background-color: blue;
    }
</style>