一个Uniappx的练手小项目

最近看了一下Dcloud新发布的UniappX，网上找了一些资料，然后课程做了这个练手的小项目，我是先看视频参考老师的思路，然后把最终的效果截图，看着效果图敲代码，下面是一些效果图和代码片段, 下载链接在结尾.

``

<template>
	<view class="container">
	 <map :latitude="114.89157" :longitude="30.400535" style="width: 100%;height: 400rpx;"></map>
	 
	 <text style="margin: 20rpx; font-size: 30rpx;">当前游玩项目:{{Play.title}}</text>
	 <text style="margin-left: 20rpx; font-size: 20rpx;">项目推荐:</text>
	 <view style="margin: 20rpx;display: flex;flex-direction: row;">
	 	<image src="/static/RedStar.png" mode="" style="width: 23rpx;height: 31rpx;" v-for="item in 4"></image>
		<image src="/static/BlackStar.png" mode="" style="width: 23rpx;height: 31rpx;"></image>
	 </view>
	 
	 <scroll-view scroll-y="true" style="width: 100%;height:100%; display: flex;flex-direction: row;" direction="horizontal" >
	 	<view v-for="(item,index) in 6" :key="index">
	 		<view style="display: flex; margin: 10rpx;">
	 			<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
	 				<view style="flex: 2;"></view>
	 				<image src="/static/qt.jpg" mode="" style="width: 300rpx; height: 200rpx;border-radius: 20rpx;"></image>
	 				<view style="flex: 2;"></view>
	 			</view>
	 			
	 			<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
	 				<view style="flex: 2;"></view>
	 				<text style="flex: 4;">其他游玩项目</text>
	 				<view style="flex: 2;"></view>
	 			</view>
	 			
	 		</view>
	 	</view>
	 </scroll-view>
	</view>
</template>

<script setup>
	let BaseUrl="https://apifoxmock.com/m1/4728220-0-default/api"
	let PageData=ref<UTSJSONObject>({})
	let Play=ref<UTSJSONObject>({})
	
	onLoad((event:OnLoadOptions)=>{
		let temp = event["item"] as string
		PageData.value = JSON.parse(temp) as UTSJSONObject
		uni.request({
			url:BaseUrl+"/project/info",
			data:{
				id:PageData.value.id.toString(),
			},
			success:(res)=>{
				let resdata =res.data as UTSJSONObject
				Play.value=resdata["data"] as UTSJSONObject
				console.log(Play.value)
			},
			
		})
		
		
		
		
		
		
	})
	
	
</script>

<style scoped lang="scss">
	.container{
		width: 100%;
		height: 100%;
	}
	
</style>

<template>
	<view class="container">
		
		<!-- 蓝色背景 -->
		<view style="background-color: #12A9F8;width: 100%; height: 300rpx; border-bottom-left-radius: 30rpx; border-bottom-right-radius: 30rpx;"></view>
		
		
		<!-- 登录页面 -->
		<view style="display: flex; flex-direction: row; position: absolute; top: 100rpx; width: 100%;height: 260rpx;">
			<view style="flex: 1;"></view>
			<view style=" flex: 8; background-color:  #FEFEFE; width: 100%; height: 100%; border-radius: 10rpx; display: flex;">
				
				
				
				
				<view style="flex: 6; width: 100%; height: 100%; display: flex; flex-direction: row;">
					<image src="/static/logo.png" mode="" style="height: 100rpx; width: 100rpx; border-radius: 80rpx; margin-top: 20rpx;margin-left: 20rpx;"></image>
					<text style="margin-top: 50rpx; margin-left: 20rpx;font-size: 30rpx;">Allen</text>
				</view>
				
				<view style="flex: 4;width: 100%; height: 100%;">
					<view style="display: flex;">
						<view style="display: flex; flex-direction: row;">
							<view style="flex: 1;"></view>
							
							<view>
								<text style="font-size: 30rpx;">12</text>
								<view style="margin-top: 5rpx;"><text style="color: gray;">点赞</text></view>
							</view>
							
							<view style="flex: 1;"></view>
							
							<view>
								<text style="font-size: 30rpx;">12</text>
								<view style="margin-top: 5rpx;"><text style="color: gray;">喜欢</text></view>
							</view>
							
							<view style="flex: 1;"></view>
							
							<view>
								<text style="font-size: 30rpx;">12</text>
								<view style="margin-top: 5rpx;"><text style="color: gray;">浏览</text></view>
							</view>
							
							<view style="flex: 1;"></view>
							
							<view>
								<text style="font-size: 30rpx;">12</text>
								<view style="margin-top: 5rpx;"><text style="color: gray;">收藏</text></view>
							</view>
							
							<view style="flex: 1;"></view>
						</view>
					</view>
				</view>
			</view>
			<view style="flex: 1;"></view>
		</view>
		
		
		
		<!-- 下面的菜单栏 -->
		<view style="width:700rpx;position: absolute; top: 400rpx; left: 50%; transform: translateX(-50%); background-color: #FEFEFE;" >
			<text style="margin: 20rpx;" v-for="(item,index) in List" :key="index">{{item.title}}</text>	
			
		</view>
		

	</view>
</template>

<script setup>
	let BaseUrl="https://apifoxmock.com/m1/4728220-0-default/api"
	let List=ref<UTSJSONObject[]>([{title:"个人信息"},{title:"我的购物车"},{title:"用户反馈"},{title:"我的邮件"},{title:"分享有礼"}])
	let UserInfo=ref<UTSJSONObject>({})
	
		
</script>

<style scoped lang="scss">
	.container{
		width: 100%;
		height: 100%;
		display: flex;
		position: relative;
		background-color: #F2F2F2;
	}
	
		
</style>

下载链接:www.123912.com/s/7J5Qvd-Xm…