1.3_视图容器_swiper

Posted 2020-12-07 luwei0915

图：

 代码：

<template>
    <view>
        <view>
            <swiper class="swiper" circular :indicator-dots="indicatorDots"
                    :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item v-for="(item,index) in vList">
                    <view class="swiper-item" :style="{background:cList[index]}">{{item}}</view>
                </swiper-item>
            </swiper>
        </view>
        <view @tap=changeDots>
            点击切换切换显示原点
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                vList:["a","b","c"],
                cList:["#007AFF","#CE3C39","#FFB400"],
                indicatorDots: true,
            }
        },
        onLoad() {

        },
        methods: {
            changeDots(){
                this.indicatorDots = !this.indicatorDots;
            }
        }
    }
</script>

<style>
    .swiper{
        height: 300rpx;   /* 默认高度 */
    }
    .swiper-item{
        display: block;
        height: 300rpx;   /* 轮播图高度 */
        line-height: 300rpx;
        text-align: center;
    }
</style>