首页 > 其他分享 >【赛题解析】【移动应用开发】全国职业院校技能大赛任务一：实现社区首页功能解析

【赛题解析】【移动应用开发】全国职业院校技能大赛任务一：实现社区首页功能解析

时间：2024-04-01 21:32:39浏览次数：28  
标签：轮播 res 赛题 职业院校 10px api 标签 解析 data

​

培训、环境、资料、考证
公众号：波比网络
公众号2：波比网络工作室
移动应用开发技能大赛交流群：548238632
波比网络专注于技能提升，赋能

**本文章全文由波比网络原创，非法转载必究！**

文章目录

移动应用与开发

任务1：实现社区首页功能

1.界面顶部显示所在社区名称、轮播图和社区发布的通知，社区

通知以滚动播放的形式显示。

参考代码：

		<!-- 社区名称 -->
		<header class="mui-bar mui-bar-nav">

			<h1 class="mui-title">万达小区</h1>
		</header>
		<div class="zhuti">
			<!-- 轮播图 -->
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop" id="lunbo">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<a href="#" class="mui-slider-item">
						<img src="">
					</a>

				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>

			<!-- 社区通知 -->
			<div id="slider" class="mui-slider tongzhiwenzi">
				<div class="mui-slider-group mui-slider-loop" id="wenzi">
					额外增加的一个节点(循环轮播：第一个节点是最后一张轮播)
					<a href="#" class="mui-slider-item">
						<p class="mui-ellipsis" style="color: #F0AD4E;font-size: 16px;"></p>
					</a>

				</div>
			</div>

  1. 在界面顶部，可以采用 header 标签，通过添加其他标签来使顶部更具美观性，比如使用 h1 标签作为标题。

  2. 轮播图采用了 MUI 文档提供的轮播组件，需要确保每个轮播项都有相同的 class 属性值为 mui-slider-item，以确保它们在同一行内显示。

  3. <div class="mui-slider-indicator">...</div> 用于在轮播图下方显示导航点，指示当前轮播项的位置。

  4. 社区通知部分也参考了轮播组件的设计，将 img 标签替换为 p 标签，以显示文字内容而不是图片。

2.以图片和名称为单元宫格方式显示快捷功能入口，快捷功能包 括开门、我的房屋、我的车位、物业缴费、扫码取件、社区公告、社区电话、投诉建议。

参考代码：


			<!-- 九宫格 -->
			<ul class="mui-table-view mui-grid-view mui-grid-9" id="jiugong">
				<!-- 渲染内容 -->
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<div id="">
							<img src="">
						</div>

						<div class="mui-media-body">Home</div>
					</a>
				</li>

			</ul>
  1. 快捷方式采用了九宫格基础框架，img 标签用于展示九宫格中的图片。
  2. <div class="mui-media-body">Home</div> 用于在九宫格图片下方添加文字说明，这样用户可以更清晰地了解每个图标的功能。
  3. 以上代码展示了基础情况，但还有相应的 JavaScript 部分用于数据的渲染和处理，详情请参考下面的完整代码。
3.显示社区活动列表和社区动态列表，社区活动列表横向排列显示，可左右滑动查看，社区活动列表项包括活动图片、标题和距离，社区动态列表项左侧显示标题、评论数和发布时间，右侧显示图片。

参考代码：


			<!-- 社会活动 -->
			<div class='shehui-zhuti'>
				<div class="shehui">
					<h3 class="shehui-title">社会活动</h3>
					<div class="more">
						<a href="activity.html" style="color: #686868;">查看更多</a>
						<span class="mui-icon mui-icon-forward" style="color: #686868;"></span>
					</div>
				</div>


				<!-- 数据轮播区域 -->
				<div class="" style="padding: 10px;margin-top: -10px;">
					<div id="slider" class="mui-slider mui-slider-two">
						<div class="mui-slider-group mui-slider-loop" id="banneractivity">
							<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
							<a href="#" class="mui-slider-item">
								<img src="">
								<div class="active_text">
									<p class="text_p"></p>
									<p class="text_p"></p>
								</div>
							</a>

						</div>
					</div>
				</div>


			</div>


			<!-- 社区动态 -->
			<div class='shehui-zhuti'>
				<div class="shehui">
					<h3 class="shehui-title">社会动态</h3>
					<div class="more">
						<a href="shdt.html" style="color: #686868;">查看更多</a>
						<span class="mui-icon mui-icon-forward" style="color: #686868;"></span>
					</div>
				</div>
				<div id="shehuidongtai">
					<div id="">
						<img src="${url+'/prod-api/'+data.imgUrl}" class="imgs">
					</div>
					<div class="active_text">
						<p class="text_pp" style="color: black;">${data.titile}</p>
						<p class="text_pp">评论${data.number}  ${data.createTime}</p>
					</div>

				</div>
			</div>
  1. 社区活动部分的代码参考了基础设计，并与相应的 CSS 样式设计相匹配。可以通过各个标签的 class 属性来查看对应的 CSS 样式设计。
  2. 左右滑动查看的功能是参考了轮播图的设计方式，但这里的轮播图是静态的，不会自动切换数据，但用户可以手动左右滑动以查看更多内容。
  3. 社区动态部分是通过修改左右滑动部分的标签设计而来的，但这是一个静态的设计。
  4. ${...} 这些是 JavaScript 中用于从后端获取数据并渲染的模板字符串，用于动态地插入变量或表达式的值。
4.显示底部导航栏，采用图标加文字方式显示，图标在上，文字在下，共四个图标分别为首页、友邻社交、社区服务、数据分析，点击标签进入对应页面，并颜色标记当前页面所在导航栏。

参考代码：

		<div style="margin-top: 90px;">
			<nav class="mui-bar mui-bar-tab mui-row">
			  <a class="mui-tab-label mui-active mui-col-sm-3 mui-col-xs-3" href="#tabbar">
					<img src="images/home-active.png" class="imgss">
					<p class="mui-tab-label yanse">首页</p>
				</a>
				<a class=" mui-tab-label mui-col-sm-3 mui-col-xs-3" href="youlin.html">
					<img src="images/socia.png" class="imgss">
					<p class="mui-tab-label">友邻社交</p>
				</a>
				<a class="mui-tab-label mui-col-sm-3 mui-col-xs-3" href="sjfx.html">
					<img src="images/shuju.png" class="imgss">
					<p class="mui-tab-label">数据分析</p>
				</a>
				<a class="mui-tab-label mui-col-sm-3 mui-col-xs-3" href="me.html">
					<img src="images/mine.png" class="imgss">
					<p class="mui-tab-label">我的</p>
				</a>
			</nav>

		</div>
  1. 在此处，通过将 nav 标签的 class 设置为 mui-bar、mui-bar-tab 和 mui-row，将其内部元素显示在底部，并使它们在同一行内对齐。
  2. mui-tab-label 类是 MUI 框架中用于定义标签页（Tab）的标签标记类。同时，mui-col-sm-3 和 mui-col-xs-3 类分别用于设置此标签在小型至中等设备上的最大宽度和在极小设备上的最小宽度。
  3. 每个 a 标签内包含的 img 标签和 p 标签用于设置底部标签的图标和文本。这种结构提供了灵活性，使得可以根据需要自定义标签页的图标和文本内容

该任务的整体代码

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<style type="text/css">
			.zhuti {

				background-color: whitesmoke;
				margin-top: 45px;
			}

			#lunbo img {

				height: 300px;

			}

			.tongzhiwenzi {
				background-color: #fef5e6;
				margin-top: -2px;

			}


			.jiugongtupian {
				padding: 10px;
				width: 60px;

			}

			#jiugong {
				background-color: white;
			}

			#waiguan {
				background-color: white;
				box-shadow: #000000 0 0 4px;
				border-radius: 35%;
				margin: 2px;
			}

			.shehui {
				padding: 10px 0 10px 10px;
			}

			.shehui-title {
				border-left: #000000 5px solid;
				font-family: '等线';
				padding: 4px 0px 5px 10px;
				display: inline-block;
			}

			.shehui-zhuti {
				background-color: white;
				margin: 20px;
				border-radius: 20px;
				height: 210px;
				box-shadow: #000000 0px 0px 2px;
			}

			.more {
				display: inline-block;
				float: right;
				margin: 0px 10px 0 0;

			}

			.shehuihuodongtupian {
				width: 170px !important; //强制设置为180px
				height: 130px !important;
				float: left;
				border-radius: 20px;
				margin: 0px 10px 10px 10px;

			}
			.imgs{
				width: 140px;
				float: right;
				height: 150px;
				padding: 0px 5px 10px 10px;
				margin: 0px 10px ;
				border-radius: 20px;
			}

			.active_text {
				padding: 40px 0px 20px 15px;
			}

			.text_p {
				font-size: 20px;
			}
			.text_pp{
				font-size: 20px;
				white-space: nowrap;
				
			}
			.imgss{
				padding-top: 10px;
				width: 30px;
				margin-bottom: -5px;
			}
			.mui-tab-label{
				font-size: 16px;
				margin-bottom: -2px;
			}
			.mui-bar-tab{
				text-align: center;
			}
			.yanse{
				color: #1296db;
			}
		</style>
	</head>

	<body>
		<!-- 社区名称 -->
		<header class="mui-bar mui-bar-nav">

			<h1 class="mui-title">万达小区</h1>
		</header>
		<div class="zhuti">
			<!-- 轮播图 -->
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop" id="lunbo">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<a href="#" class="mui-slider-item">
						<img src="">
					</a>

				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>

			<!-- 社区通知 -->
			<div id="slider" class="mui-slider tongzhiwenzi">
				<div class="mui-slider-group mui-slider-loop" id="wenzi">
					额外增加的一个节点(循环轮播：第一个节点是最后一张轮播)
					<a href="#" class="mui-slider-item">
						<p class="mui-ellipsis" style="color: #F0AD4E;font-size: 16px;"></p>
					</a>

				</div>
			</div>


			<!-- 九宫格 -->
			<ul class="mui-table-view mui-grid-view mui-grid-9" id="jiugong">
				<!-- 渲染内容 -->
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<div id="">
							<img src="">
						</div>

						<div class="mui-media-body">Home</div>
					</a>
				</li>

			</ul>


			<!-- 社会活动 -->
			<div class='shehui-zhuti'>
				<div class="shehui">
					<h3 class="shehui-title">社会活动</h3>
					<div class="more">
						<a href="activity.html" style="color: #686868;">查看更多</a>
						<span class="mui-icon mui-icon-forward" style="color: #686868;"></span>
					</div>
				</div>


				<!-- 数据轮播区域 -->
				<div class="" style="padding: 10px;margin-top: -10px;">
					<div id="slider" class="mui-slider mui-slider-two">
						<div class="mui-slider-group mui-slider-loop" id="banneractivity">
							<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
							<a href="#" class="mui-slider-item">
								<img src="">
								<div class="active_text">
									<p class="text_p"></p>
									<p class="text_p"></p>
								</div>
							</a>

						</div>
					</div>
				</div>


			</div>


			<!-- 社区动态 -->
			<div class='shehui-zhuti'>
				<div class="shehui">
					<h3 class="shehui-title">社会动态</h3>
					<div class="more">
						<a href="shdt.html" style="color: #686868;">查看更多</a>
						<span class="mui-icon mui-icon-forward" style="color: #686868;"></span>
					</div>
				</div>
				<div id="shehuidongtai">
					<div id="">
						<img src="${url+'/prod-api/'+data.imgUrl}" class="imgs">
					</div>
					<div class="active_text">
						<p class="text_pp" style="color: black;">${data.titile}</p>
						<p class="text_pp">评论${data.number}  ${data.createTime}</p>
					</div>

				</div>
			</div>
			
			
		</div>
		<div style="margin-top: 90px;">
			<nav class="mui-bar mui-bar-tab mui-row">
			  <a class="mui-tab-label mui-active mui-col-sm-3 mui-col-xs-3" href="#tabbar">
					<img src="images/home-active.png" class="imgss">
					<p class="mui-tab-label yanse">首页</p>
				</a>
				<a class=" mui-tab-label mui-col-sm-3 mui-col-xs-3" href="youlin.html">
					<img src="images/socia.png" class="imgss">
					<p class="mui-tab-label">友邻社交</p>
				</a>
				<a class="mui-tab-label mui-col-sm-3 mui-col-xs-3" href="sjfx.html">
					<img src="images/shuju.png" class="imgss">
					<p class="mui-tab-label">数据分析</p>
				</a>
				<a class="mui-tab-label mui-col-sm-3 mui-col-xs-3" href="me.html">
					<img src="images/mine.png" class="imgss">
					<p class="mui-tab-label">我的</p>
				</a>
			</nav>

		</div>
		


		



			<script src="js/mui.js"></script>
			<script src="m_js/shiyong.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				mui.init()
				loginAjax('/prod-api/api/login', {
					'username': 'test01',
					'password': '123456'
				}, (res) => {
					console.log(res)
					localStorage.setItem('token', res.token)
				})
				console.log(token)
				getAjax('/prod-api/api/rotation/list?Num=1&pageSize=8', (res) => {
					console.log(res)
					var list = res.rows
					list.push(list[0])
					list.unshift(list[7])
					console.log(list)
					var lunbo = ''
					list.forEach(function(data) {
						lunbo += `
					<a href="#" class="mui-slider-item">
							<img src="${url+'/prod-api/'+data.advImg}">
					</a>
					`

					})
					document.getElementById('lunbo').innerHTML = lunbo
					mui('.mui-slider').slider({
						interval: 3000
					})
				})



				getAjax('/prod-api/api/community/community_notice/list?noticeStatus=0', (res) => {
					console.log(res)
					var tongzhi = res.rows
					tongzhi.push(tongzhi[0])
					tongzhi.unshift(tongzhi[3])
					console.log(tongzhi)
					wenzi = ''
					tongzhi.forEach(function(data) {
						wenzi += `
					<a href="#" class="mui-slider-item">
							<p class="mui-ellipsis" style="color: #F0AD4E;font-size: 20px;">${data.contentNotice}</p>
					</a>
					
					`

					})
					document.getElementById('wenzi').innerHTML = wenzi
					mui('.tongzhiwenzi').slider({
						interval: 10000
					})


				})


				getAjax('/prod-api/api/community/community-express/list', (res) => {
					console.log(res)
					var jiugong = ''
					var data = res.rows
					data.forEach(function(data) {
						jiugong += `
					<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3" style='border:none'>
						<a href="#" οnclick='tiaozhaun(${data.id})'>
							<div id="waiguan">
								<img src="${url+'/prod-api/'+data.imgUrl}" class='jiugongtupian'>
							</div>
							
							<div class="mui-media-body">${data.name}</div>
						</a>
					</li>
					
					`


					})
					document.getElementById('jiugong').innerHTML = jiugong
				})


				getAjax('/prod-api/api/community/community-activity/activity-list', (res) => {
					console.log(res)
					var item = res.rows
					item.push(item[0])
					item.unshift(item[24])
					var banneractivity = ''
					item.forEach(function(data) {
						banneractivity += `
					<a href="#" class="mui-slider-item">
						<img src="${url+'/prod-api'+data.imgUrl}" class='shehuihuodongtupian' style='height:130px'>
						<div class="active_text">
							<p class="text_p" style='color:black'>${data.comCategory}</p>
							<p class="text_p">距离:${data.comDistance}</p>
						</div>
					</a>
					`

					})
					document.getElementById('banneractivity').innerHTML = banneractivity

				})
				
				
				getAjax('/prod-api/api/community/community-activity/1',(res)=>{
					console.log(res)
					
					var shehuidongtai = ''
					dongtai=`
					<div id="">
						<img src="${url+'/prod-api/'+res.data.imgUrl}" class="imgs">
					</div>
					<div class="active_text">
						<p class="text_pp" style="color: black;">${res.data.titile}</p>
						<p style='font-size: 15px;'>评论${res.data.number}  ${res.data.createTime}</p>
					</div>
					`
					document.getElementById('shehuidongtai').innerHTML=dongtai
				})
				
				function tiaozhaun(id){
					if(id == 1){
						location.href='sqgg.html'
					}
				}
				
				
			</script>
	</body>

</html>

标签：轮播,res,赛题,职业院校,10px,api,标签,解析,data
From： https://blog.csdn.net/blbinet/article/details/137247189

相关文章

  • 鸿鹄电子招投标系统：源码级别解析电子招投标的精髓
    招投标管理系统是一个集门户管理、立项管理、采购项目管理、采购公告管理、考核管理、报表管理、评审管理、企业管理、采购管理和系统管理于一体的综合性应用平台。它适用于招标代理、政府采购、企业采购和工程交易等业务的企业，旨在提高项目管理的效率和质量。该系统以项目为主......
  • 深入解析大数据体系中的ETL工作原理及常见组件
    **引言关联阅读博客文章：探讨在大数据体系中API的通信机制与工作原理关联阅读博客文章：深入理解HDFS工作原理：大数据存储和容错性机制解析**在当今数字化时代，大数据处理已经成为了企业成功的重要组成部分。而在大数据处理中，ETL（Extract,Transform,Load）是至关重要的一环，它......
  • 解析Apache Kafka：在大数据体系中的基本概念和核心组件
    关联阅读博客文章：探讨在大数据体系中API的通信机制与工作原理关联阅读博客文章：深入解析大数据体系中的ETL工作原理及常见组件关联阅读博客文章：深度剖析：计算机集群在大数据体系中的关键角色和技术要点关联阅读博客文章：深入理解HDFS工作原理：大数据存储和容错性机制解析引......
  • MogDB/openGauss中merge的语法解析
    MogDB/openGauss中merge的语法解析近期了解学习了MogDB/openGauss中merge的使用，merge语法是根据源表对目标表进行匹配查询，匹配成功时更新，不成功时插入。简单来说就是有则更新，无则插入，语句简洁，效率高。下面展示MogDB/openGauss中merge的语法openGauss=#\hmergeCo......
  • 探索GaussDB(DWS)湖仓融合：Hudi与元数据打通的深度解析
    华为云数仓GaussDB(DWS)研发专家高若岳老师，深入解析GaussDB(DWS)数据仓库如何与大数据生态快速对接。随着智能数据时代的到来，数据量爆发式增长，数据形态呈海量化和多样化发展，不再是单一的结构化数据。从海量和多样化的数据做融合分析，创造更多业务价值的诉求日益强烈。在本期《Ga......
  • 【操作系统】千字解析信号量
    信号量机制是一种用于控制多进程或者多线程并发访问共享资源的同步机制。信号量实质上是一个整型计数器，通常用于表示可用资源的数量或许可证的数量，类似于一个整型的全局变量。不同于一般的整型变量，对信号量的操作只有两个：P操作和V操作P操作即wait操作，为进程申请一个资源S，S相应......
  • 抖音X-Bogus加密解析（全网最快）
     前言：    想着偷个懒，还是发现有想学习技术的兄弟，商量着把这个抖音的逆向给干一下，这个我都把要补的环境贴出来了，照着写上去不会嘛。有关xb的教学基本随处可见，苦思冥想后，还是暂时出一期教学，我们搞快点！直接一步写到位。                       ......
  • 深入解析Java中的核心数据结构：从基础到进阶实战
    在软件开发领域，熟悉并掌握数据结构对于提升程序性能和优化算法至关重要。本文将全面介绍Java中常用的核心数据结构，辅以示例代码和概念图解，以帮助读者更好地理解和应用这些数据结构。1.数组（Array）数组是Java中最基础的数据结构之一，它是在内存中一块连续区域存放相同类型元......
  • 深入解析：Linux目录结构及其功能详解
    Linux目录结构是Linux操作系统中的核心组成部分，它承载着整个系统的文件和资源。本文将带领读者深入解析Linux的目录结构，详细介绍各个目录的功能与用途，帮助读者更好地理解和使用Linux系统。从根目录“/”开始，我们将逐一探讨各个子目录，如“/bin”、“/etc”、“/home”等，揭示......
  • 数据解析
    Spider常用知识二.数据解析1.正则贪婪匹配和惰性匹配.*贪婪匹配,尽可能多的去匹配结果.*?惰性匹配,尽可能少的去匹配结果->回溯这两个要着重的说一下.因为我们写爬虫用的最多的就是这个惰性匹配.re模块中我们只需要记住这么几个功能就足够我们使用了.......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99