uniapp轮播图

这边介绍下在使用uniapp开发时非常常见的两种轮播图，代码粘过去就可以直接运行
第一种

第一种

代码如下：

<template>
	<view>
		<!-- previous-margin指的是当前图片的左边框距离屏幕最左边的距离 -->
		<swiper style="height: 600rpx;" previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"   :indicator-dots="true"  :circular="true" :interval="3000" :duration="1000">
			<swiper-item v-for="i,index in 10" :key="i">
				<view :class="['swiper-item',index==mycurrent ? 'active' : '']">
					<img src="https://s2.loli.net/2022/05/11/rHeUj2V7pWg6MyQ.jpg" style="width: 100%;height: 100%;"  alt="" srcset="">
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mycurrent:0
			}
		},
		methods: {
			handlechange(e){
				this.mycurrent=e.detail.current
			}
		}
	}
</script>

<style lang="scss">
	.swiper-item{
		border-radius: 30rpx;
		overflow: hidden;
		// 像这种多张轮播图同时出现在一屏的情况下就不要指定width了，不然你会发现previous-margin和 next-margin会出现想不到的效果
		// 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了
		// width: 450rpx;
		height: 85%;
		transform: scale(0.8);
		transition:all 0.5s ease;
		text-align: center;
		transition: all 0.5s ease-in-out;
		&.active{
			transform: scale(1);
		}
	}
</style>

第二种

代码如下：

<template>
	<swiper :display-multiple-items="2" previous-margin="250rpx" @change="swiperchange" :current="current" :indicator-dots="true"  :circular="true" :interval="3000" :duration="1000">
		<swiper-item v-for="i,index in 10" :key="i">
			<view  :class="['swiper-item',index==current ? 'active' : '']">
				<img src="https://s2.loli.net/2022/05/11/rHeUj2V7pWg6MyQ.jpg" style="width: 100%;height: 100%;" alt="" srcset="">
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default{
		data(){
			return {
				current:1,
			}
		},
		methods:{
			swiperchange(e){
				this.current=e.detail.current
			}
		}
	}
</script>

<style lang="scss">
	.swiper-item{
		height: 70%;
		transform: scale(0.8);
		transition:all 0.5s ease;
		text-align: center;
		transition: all 0.5s ease-in-out;
		&.active{
			transform: scale(1);
		}
	}
	
</style>