uni-app css 实现 banner轮播图

uniapp简易轮播图，指示点隐藏，显示展示页数

超简单！静态界面！

一、html代码

<template>
	<view >
		<!--顶部banner轮播-->
		<view class="uni-margin-wrap">
			<swiper  @change="changeItem"  class="swiper box" circular :indicator-dots="indicatorDots" :autoplay="autoplay">
				<swiper-item >
					<view class="swiper-item uni-bg-red">
						<image class="bannerimg" src="../../static/shop/boy.png"  mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">
						<image class="bannerimg"  src="../../static/shop/boy.png"  mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">
						<image class="bannerimg"  src="../../static/shop/boy.png" mode="widthFix" ></image>
					</view>
				</swiper-item>
			</swiper>
            <!--页数展示数字-->
			<span class="item-num" v-if="showLength>1">{{activeIndex}} | 3</span>
			<span class="item-num" v-else>1|3</span>
			
		</view>
    </view>
</template>

二、js代码

export default{
		data(){
			return{
				indicatorDots: false,
				autoplay: true,
				activeIndex: 1,
				imglength:3,
			}
		},
		computed: {
		  showLength () {
			return 3;
		  }
		},
		methods:{
			//切换图，更换数字
			changeItem (e) {
				var activeIndex=this.activeIndex;
				var imglength=this.imglength;
				if(activeIndex>=imglength){
					this.activeIndex= 1;
				}else{
					this.activeIndex= this.activeIndex+1;
				}
			}
		}
		
	}

三、css代码

/**顶部banner*/
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		position: relative;
	}
	.swiper {
		height: 800rpx;
		position: relative;
	}
	.swiper-item {
		display: block;
		height: 800rpx;
		line-height: 800rpx;
		text-align: center;
	}
	.bannerimg{
		width: 100vw;
	}
	.indexShow{
	  position: absolute;
	  right: 20rpx;
	  bottom: 20rpx;
	  background:rgba(255,255,255,0.31);
	  color: #FFF;
	  font-size: 24rpx;
	  padding: 5rpx 30rpx;
	  border-radius: 30rpx;
	}
	.box{
		position:relative;
	}
    .item-num{ 
		z-index: 9;
        position: absolute;
		margin-top: -200rpx;
        right: 20rpx;
        background: #969696;
        padding: 0 22rpx;
        height: 40rpx;
        line-height: 40rpx;
        border-radius: 20rpx;
        font-size: 30rpx;
        color: #FFF;
	}
	

展示效果：