uniapp野兽派首页

思路：1：调接口

2：写轮播图标签

3：v-for遍历轮播图

4：方块current与图片下标index对应（@change给父元素）

5：图片类型进行判断，先渲染最大一层，再渲染小的一层

<template>
	<view class="home">
		<!-- 第二步：写轮播图标签-->
		<swiper :autoplay="true" :interval="3000" :circular='true' :duration="1000" @change="getindex"
			style="height: 65vh;">
			<!-- 第三步：v-for遍历轮播图 -->
			<swiper-item v-for="item in banner" style="width: 100vw;">
				<image style="width: 100%; height: 100%;" :src="item.media.src" mode="heightFix "></image>
				<!-- 这个地方找到儿子 -->
			</swiper-item>
		</swiper>
		<!-- 第四步：方块current跟图片的下标对应 @chang事件给父元素-->
		<view style="display: flex;justify-content:space-around;">
			<!-- current等于图片下标的时候是黑色 -->
			<view style="width: 100%;height: 14rpx;"
				:style="currentimg==index?'background-color:#000':'background-color:#d8d8d3'"
				v-for="(item,index) in banner" :key="index.imgid">
			</view>
		</view>
		<!-- 判断图片类型  -->
		<view v-for="(item,index) in modules" :key="index" style="margin-bottom:-4px ;">
			<view v-if="item.type=='image'&&item.data.image">
				<image v-if="index!=4&&index!=5" class="image" :src="item.data.image.src"></image>
				<image v-else class="full" :style="{'height':item.data.image.height/2.8+'px'}"
					:src="item.data.image.src"></image>
			</view>
			<view v-if="item.type=='new-image'">
				<image v-if="index!=3&&index!=19&&index!=18" class="full" :src="item.data.items[0].media.src"
					:style="{'height':item.data.items[0].media.height/3+'px'}"></image>
				<view v-else-if="index==3" class="scroll">
					<image v-for="(sitem,ind) in item.data.items" :key="ind" :src="sitem.media.src"
						:style="{'height':sitem.media.height/3+'px'}"></image>
				</view>
				<view v-else>
					<image class="lastimg" v-for="(sitem,ind) in item.data.items" :key="ind" :src="sitem.media.src"
						:style="{'height':sitem.media.height/3+'px'}"></image>
				</view>
			</view>
			<view class="newshow" v-if="item.type=='new'">
				<view v-for="(sitem,index) in item.data.codes" :key="index">
					<show-home :gngz='sitem'></show-home>
				</view>
				<view class="lastshow">
					<view class="showtext">查看更多<text style="font-family: 宋体;padding-left: 4px;"> ></text></view>
				</view>
			</view>
		</view>
	</view>
</template>

js部分

<script>
	export default {
		data() {
			return {
				banner: [], // 轮播数据
				modules: [], //首页数据
				currentimg: 1
			}
		},
		onLoad() {
			this.geturl()
			// this.getnew()
		},

		methods: {
			geturl() {
				uni.request({
					url: "https://api.thebeastshop.com/app/index/getNewIndex", //第一步调接口
					success: (res) => {
						this.banner = res.data.data.modules[0].data.items //这个地方找到爹
						this.modules = res.data.data.modules // 首页all数据

					}
				});
			},
			getindex(e) {
				this.currentimg = e.target.current
			},
		}
	}
</script>

style样式部分

<style>
	.home {
		width: 100%;
		height: 100vh;
		overflow: scroll;
	}

	.full {
		width: 100%;
	}

	.image {
		width: 100%;
		height: 38vh;
	}

	.scroll {
		display: flex;
		justify-content: space-between;
	}

	.newshow {
		display: flex;
		justify-content: space-between;
		overflow: scroll;
	}

	.lastshow {
		padding: 0 20px;
	}

	.showtext {
		text-align: center;
		white-space: nowrap;
		line-height: 200px;
		border: 2px solid #000;
		padding: 6px 20px;
		font-size: 14px;
		display: inline;
	}

	.lastimg {
		width: calc(100vw/2);
	}
</style>