uni-app 轮播

1,279 阅读1分钟
本来想想将轮播封装一下,但是自己太懒了,就不去封装了。
用的uni-app视图容器中的  swiper组件
<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" 
                    :indicator-color="ponitcolor"  
                    :indicator-active-color="currentcolor"
                    :circular="zidongxianjie"
                    :indicator-dots="indicatorDots" 
                    :autoplay="autoplay"        
                    :interval="interval" 
                    :duration="duration">
                       
	                    <swiper-item>
                            <view class="swiper-item uni-bg-red my-uni-bg-red">A</view>
                        </swiper-item>
						
                        <swiper-item>
                            <view class="swiper-item uni-bg-green  my-uni-bg-b">B</view>
                        </swiper-item>
						
                        <swiper-item>
                            <view class="swiper-item uni-bg-blue my-uni-bg-c">C</view>
                        </swiper-item>
						
                    </swiper>
                </view>
            </view>
        </view>
		
    </view>
</template>
<script>
export default {
    data() {
        return {
            zidongxianjie:true,//自动衔接,
            background: ['color1', 'color2', 'color3'],
            indicatorDots: true,//是否显示面板指示点 就是下面那个小圆点
            autoplay: true,//是否自动播放
            ponitcolor:"#fff",//指示点的颜色
            currentcolor:"red",//当前指示点颜色
            interval: 2000,
            duration: 500,
        }
    }
}
</script>

<style  scoped>
.my-uni-bg-red{
	background: hotpink;
	height: 300upx;
}
.my-uni-bg-b{
	background: palegoldenrod;
	height: 300upx;
}

.my-uni-bg-c{
	background: peru;
	height: 300upx;
}
</style>