首页 > 其他 > 详细

1.3_视图容器_swiper

时间:2020-06-04 01:25:52      阅读:62      评论:0      收藏:0      [点我收藏+]

图:

技术分享图片

 代码:

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

1.3_视图容器_swiper

原文:https://www.cnblogs.com/luwei0915/p/13040943.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!