uni-app之项目 首页实现2

uni-app之项目 首页实现2

轮播图的实现

• index / index.vue

<template>
	<view class="home">
	首页
	swiper- {{ swiper }}
	<swiper class="swiper" circular indicator-dots="true" autoplay interval="2000" duration="500" >
		<swiper-item v-for="(item,idx) in swiper" :key="idx">
			<view class="swiper-item uni-bg-red">{{item.title}}</view>
		</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper:[],
			}
		},
		onLoad() {
			this.getSwiper()
		},
		methods: {
			// 获取了轮播图数据
			async getSwiper(){
				const res = await this.$myHttp({
					url:"/swiper",
				})
				console.log("res",res);
				this.swiper = res.data;
			}
		}
	}
</script>

<style lang="scss">
.home {
	.swiper {
		width: 750rpx;
		height: 380rpx;
		background: orange;
	}
}
</style>

• 效果
  

首页 导航的实现

<template>
	<view class="home">
	<view class="nav">
		<view class="nav_item" v-for="item in navList">
			{{ item }}
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList:[1,2,3,4]
			}
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>

<style lang="scss">
.home {
	.nav {
		margin-top: 15rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.nav_item {
			height: 120rpx;
			line-height: 120rpx;
			width: 120rpx;
			border: 1px solid #ccc;
			text-align: center;
		}
	}
}
</style>

• 效果
  

推荐商品

<template>
	<view class="home">
	<view class="recommend">
		<view class="recommend_title">
			推荐商品
		</view>
		<view class="recommend_list">
			<view class="recommend_list_item">
				商品1
			</view>
			<view class="recommend_list_item">
				商品2
			</view>
			<view class="recommend_list_item">
				商品3
			</view>
			<view class="recommend_list_item">
				商品4
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>

<style lang="scss">
.home {
	.recommend {
		margin-top: 10rpx;
		background: #eee;
		overflow: hidden;
		.recommend_title {
			margin: 7rpx 0;
			height: 80rpx;
			line-height: 80rpx;
			color: $shop_color;
			text-align: center;
			background: #fff;
			letter-spacing: 20rpx;
		}
		.recommend_list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 15rpx;
			.recommend_list_item {
				box-sizing: border-box;
				margin-bottom: 15rpx;
				background: #fff;
				width: 355rpx;
				height: 400rpx;
				line-height: 400rpx;
				text-align: center;
			}
		}
	}
}
</style>

• 效果
  

完整的首页

<template>
	<view class="home">
	<swiper class="swiper" circular indicator-dots="true" autoplay interval="2000" duration="500" >
		<swiper-item v-for="(item,idx) in swiper" :key="idx">
			<view class="swiper-item uni-bg-red">{{item.title}}</view>
		</swiper-item>
	</swiper>
	<view class="nav">
		<view class="nav_item" v-for="item in navList">
			{{ item }}
		</view>
	</view>
	<view class="recommend">
		<view class="recommend_title">
			推荐商品
		</view>
		<view class="recommend_list">
			<view class="recommend_list_item" v-for="item in shopList">
				{{ item.title}}
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper:[],
				navList:[1,2,3,4],
				shopList:[],
			}
		},
		onLoad() {
			this.getSwiper();
			this.getShopList();
		},
		methods: {
			// 获取了轮播图数据
			async getSwiper(){
				const res = await this.$myHttp({
					url:"/swiper",
				})
				console.log("res",res);
				this.swiper = res.data;
			},
			// 获取商品列表
			async getShopList(){
				const res = await this.$myHttp({
					url:"/shopList",
				})
				this.shopList = res.data;
			}
		}
	}
</script>

<style lang="scss">
.home {
	.swiper {
		width: 750rpx;
		height: 380rpx;
		background: orange;
	}
	.nav {
		margin-top: 15rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.nav_item {
			height: 120rpx;
			line-height: 120rpx;
			width: 120rpx;
			border: 1px solid #ccc;
			text-align: center;
			color: $shop_color;
		}
	}
	.recommend {
		margin-top: 10rpx;
		background: #eee;
		overflow: hidden;
		.recommend_title {
			margin: 7rpx 0;
			height: 80rpx;
			line-height: 80rpx;
			color: $shop_color;
			text-align: center;
			background: #fff;
			letter-spacing: 20rpx;
		}
		.recommend_list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 15rpx;
			.recommend_list_item {
				box-sizing: border-box;
				margin-bottom: 15rpx;
				background: #fff;
				width: 355rpx;
				height: 400rpx;
				line-height: 400rpx;
				text-align: center;
			}
		}
	}
}
</style>