uniapp轮播图

<template>

	<view class="header">
		<!-- 首页轮播图 -->
		<view class="swiper">
			<swiper :indicator-dots="false" circular :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in swiperImageList" :key="item.id">
					<image :src="item.img" @tap="onImageBig(item.img)"></image>
				</swiper-item>
			</swiper>
			<view class="content">


				<!-- 精彩动态，个人中心 -->
				<view class="spermatokinesis">
					<!-- 精彩动态 -->
					<view class="spermatokinesis_box">
						精彩动态
						<!-- <image src="../../static/index.png"></image> -->

					</view>
				</view>
				<view class="personage">
					<!-- 精彩动态 -->
					<view class="personage_box">
						个人中心
						<!-- <image src="../../static/index.png"></image> -->

					</view>
				</view>

				<!-- 推荐资讯 -->
				<view class="recommend">
					<view class="recommend_1">
						推荐
					</view>
					<view class="recommend_2">
						资讯
					</view>
				</view>
				<!-- 图片 -->
				<!-- 一左二右 -->
				<view class="img">
					<!-- 左 -->
					<view class="img_left">
						<view class="img_box">
							<image
								src="https://ts1.cn.mm.bing.net/th/id/R-C.2890a40ae1689f5202a9181cc24c83ae?rik=rM9XQ27OwIRoow&riu=http%3a%2f%2fpic.616pic.com%2fbg_w1180%2f00%2f09%2f25%2f0mMYJVNSAB.jpg!%2ffw%2f880&ehk=AixMOIml%2b5sZG%2bbgcLep6mebRtq95sfGDeUBFHVO%2fNs%3d&risl=&pid=ImgRaw&r=0"
								mode=""></image>
						</view>
						<view class="text_box">
							<view class="txt">
								六卡子
							</view>
							<view class="av_box">
								<view class="av">
									<image
										src="https://c-ssl.duitang.com/uploads/blog/202108/12/20210812180249_fe61f.jpg"
										mode=""></image>
								</view>
								<view class="like">
									点赞
								</view>
							</view>
						</view>

					</view>
					<!-- 右 -->
					<view class="img_right">
						<view class="img1_box">
							<image
								src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0B/0D/ChMkJlwgtSuIKgwrAAK4EuiEBfQAAt9WQPSDy0AArgq206.jpg"
								mode=""></image>
						</view>
						<view class="text_box">
							<view class="txt">
								手机测试
							</view>
							<view class="av_box">
								<view class="av">
									<image
										src="https://c-ssl.duitang.com/uploads/blog/202108/12/20210812180249_fe61f.jpg"
										mode=""></image>
								</view>
								<view class="like">
									点赞
								</view>
							</view>
						</view>
						<view class="img1_box">
							<image
								src="https://ts1.cn.mm.bing.net/th/id/R-C.ffe8d63ca56c1cb5092112d340d6943b?rik=8FiYw%2bGUu%2bIkCw&riu=http%3a%2f%2fb.zol-img.com.cn%2fdesk%2fbizhi%2fstart%2f4%2f1390810075453.jpg&ehk=vLLSMPUIkqWubMzYFrSSE6eYxN7CVP0jf%2ffATtd1bkw%3d&risl=&pid=ImgRaw&r=0"
								mode=""></image>
						</view>
						<view class="text_box">
							<view class="txt">
								手机测试
							</view>
							<view class="av_box">
								<view class="av">
									<image
										src="https://c-ssl.duitang.com/uploads/blog/202108/12/20210812180249_fe61f.jpg"
										mode=""></image>
								</view>
								<view class="like">
									点赞
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperImageList: [{
						id: 0,
						img: "https://ts4.cn.mm.bing.net/th?id=OIP-C.duz6S7Fvygrqd6Yj_DcXAQHaF7&w=279&h=223&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
					},
					{
						id: 1,
						img: "https://ts3.cn.mm.bing.net/th?id=OIP-C.E6m4s0dlHQhce_kPus5WJAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
					},
					{
						id: 2,
						img: "https://ts1.cn.mm.bing.net/th?id=OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			// 点击放大预览图片
			onImageBig(item) {
				// console.log(item)
				uni.previewImage({
					urls: this.swiperImageList.map(v => v.img),
					current: item
				})
			}

		}
	}
</script>

<style>
	.header {
		width: 750rpx;
		height: 750rpx;
	}

	.swiper image {
		width: 100%;
		height: 100%;
	}

	swiper {
		height: 420rpx;
	}

	.content {
		background-color: #fafafa;
	}

	.spermatokinesis {
		background-color: white;
		width: 300rpx;
		height: 75rpx;
		border-radius: 40rpx;
		text-align: center;
		position: relative;
		top: -35rpx;
		left: 20rpx;
	}

	.spermatokinesis_box {
		height: 75rpx;
		line-height: 75rpx;
		font-size: 28rpx;


	}

	.personage {
		background-color: white;
		width: 300rpx;
		height: 75rpx;
		border-radius: 40rpx;
		text-align: center;
		position: relative;
		top: -110rpx;
		left: 55%;
	}

	.personage_box {
		height: 75rpx;
		line-height: 75rpx;
		font-size: 28rpx;
	}

	.recommend {
		display: flex;


	}

	.recommend_1 {
		margin-top: -50rpx;
		margin-right: 50rpx;
		margin-left: 38%;
		color: rgb(39, 106, 249);
	}

	.recommend_2 {
		margin-top: -50rpx;
		color: #a3a3a3;

	}

	.img {
		display: flex;
		margin-top: 20rpx;
	}

	.img_left {

		height: 650rpx;
		width: 50%;
	}

	.img_right {

		width: 50%;
	}

	.img_box {
		width: 100%;
		height: 520rpx;

	}

	.text_box {
		margin-top: 10rpx;
		height: 120rpx;
	}

	.av_box {
		display: flex;
		margin-top: 10rpx;
		justify-content: space-between;
	}

	.img1_box {

		height: 260rpx;
	}

	.image {
		width: 100%;
		height: 100%;
	}
</style>