培训、环境、资料、考证
公众号：波比网络
公众号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>
-
在界面顶部，可以采用
header标签，通过添加其他标签来使顶部更具美观性，比如使用h1标签作为标题。 -
轮播图采用了 MUI 文档提供的轮播组件，需要确保每个轮播项都有相同的
class属性值为mui-slider-item，以确保它们在同一行内显示。 -
<div class="mui-slider-indicator">...</div>用于在轮播图下方显示导航点，指示当前轮播项的位置。 -
社区通知部分也参考了轮播组件的设计，将
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>
- 快捷方式采用了九宫格基础框架，
img标签用于展示九宫格中的图片。 <div class="mui-media-body">Home</div>用于在九宫格图片下方添加文字说明，这样用户可以更清晰地了解每个图标的功能。- 以上代码展示了基础情况，但还有相应的 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>
- 社区活动部分的代码参考了基础设计，并与相应的 CSS 样式设计相匹配。可以通过各个标签的 class 属性来查看对应的 CSS 样式设计。
- 左右滑动查看的功能是参考了轮播图的设计方式，但这里的轮播图是静态的，不会自动切换数据，但用户可以手动左右滑动以查看更多内容。
- 社区动态部分是通过修改左右滑动部分的标签设计而来的，但这是一个静态的设计。
${...}这些是 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>
- 在此处，通过将
nav标签的 class 设置为mui-bar、mui-bar-tab和mui-row，将其内部元素显示在底部，并使它们在同一行内对齐。 mui-tab-label类是 MUI 框架中用于定义标签页（Tab）的标签标记类。同时，mui-col-sm-3和mui-col-xs-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>
725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
