uni-app uview 轮播图

上边

<view class="lervor-card-page">
     <swiper class="card-swiper" autoplay circular previous-margin="65rpx" next-margin="65rpx"
                    @change="changeCard">
         <swiper-item v-for="(item, index) in cardList" :key="index" @click="toPage(item)">
             <view
                            :class="['card-item', currentCardIndex === index ? 'card-item-current' : 'card-item-default']">
                 <image class="card-bg" :src="item.image" mode=""></image>
                        </view>
          </swiper-item>
       </swiper>
    <view class="listBox">
         <view class="dLine">
             <view v-for="(item,index) in cardList" :key="index"
                            :class="['dian', currentCardIndex === index ? 'heidian' : 'huidian']">
             </view>
          </view>
    </view>
</view>

js 

export default {
	data() {
	    return {
	    currentCardIndex: 0,
	    cardLis: [],
	    }
	},
	onShow() {},
	watch:{},
	onLoad(e) {
		this.getBannerList()
	},
    methods: {
	    // 获取轮播图列表
	    getBannerList(){},
    }
}

cssw

.card-swiper {
	width: 100%;
	height: 292rpx; // 轮播图片的高度
	background: #fff;

}

.card-item {
	transition: transform 0.3s; // 缩放动画播放 0.3S
	border-radius: 10rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 26rpx 36rpx 0;
	color: #FFFFFF;
	position: relative;

}

.card-bg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.card-item-default {
	transform: scale(0.9, 0.80) translateY(0rpx); // 缩小到原来的 0.96，并沿Y轴向下移动 50rpx
}
.listBox{
	min-width: 60rpx;
	height: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

效果：

有bug再评论