大家好，我是中原工学院的张迅，以下是我的作业报告：
已知app主要为用户提供信息，使其能够实现信息流展示、页面跳转、搜索、评论等功能
这里主要以一款新闻类app为例，展开讲解，如图：
一、观察页面所需要实现的效果：
1.从本地后端获取新闻资讯Feed流 2.切换Teb页签 3.下拉刷新，并获取最新的新闻信 4.点击菜单图标实现页面的切换
二、页面的布局以及所需的组件和标签：
- 第一行：顶部logo搜索框
- 图片标签
- 跑马灯效果的搜索框组件
- 文本标签
- 第二行：Tab页签
- 文本标签
- 第三行：新闻列表
- 文本标签以及图片标签
- 第四行：菜单选则
- 文本标签以及图片标签
三、所需语言：
四、代码编写：
hml部分：
<div class="container">
<div class="header">
<div class="Logo">
<image src="/common/images/sina-filt.png"></image>
</div>
<div class="search">
<search @search="search"></search>
<marquee>第一观察|十年档树，总书记赋予绿化新内通</marquee>
<text>取消</text>
</div>
</div>
<div class="nav-bars">
<div for="barArray" onclick="changeBar({{$idx)})">
<text class="{{$item.className}}">{{$item.content}}</text>
</div>
</div>
<div class="news-list">
<list @scrollbottom="Lazyload">
<list-item class-"news-item" style-"border-bottom: 1px solid #999;" for="newsData">
<div class="news-List">
<div class="news-item" tid-"item_id" onclick="toDetail({{$item.item_id}})">
<div class="nens-left">
<image if="{{$item.has_image}}" src="{{$iten.large_image_ur1}}"></image>
<image elif="{{$item.has_video}}" sre="{{$item.video_detail_info.detail_video_large_image.url}}"></image>
</div>
<div class="news-right">
<text class="title">{{$item.title}}</text>
<text class="abstract">{{$iten.abstract}}</text>
</div>
</div>
</div>
</list-item>
</list>
</div>
<div class="tabs_container">
<div class="tab" for="{{array})" onclick="sendMsg($idx)" >
<image class="tob_inoge" src="{{$item.image2url}}"></image>
<text class="title" else>{{$item.title}}</text>
</div>
</div>
</div>css部分：
.container{
flex-direction: column;
width: 100%;
scrollbar-width: 0;
}
.header{
width: 100%;
flcx-direction: row;
height: 8%;
align-items: center;
justify-content: space-around;
background-color: red;
position: fixedi;
top:0;
z-index:10;
}
header .logo{
width: 35vp;
height: 35vp;
}
.header .search{
width:80%;
height: 60%;
position: relative;
align-items: center;
}
.search marquee{
width: 60%;
font-size: 18fp;
color: #333;
margin-top: 4vp;
margin-left: 45vp;
}
v.search text{
font-size: 17fp;
color: #fff;
margin-left: 15vp;
position: absolute;
right: 2%;
top: 10%;
}
.nav-bars{
height: 5%;
background-color: #dcdcdc;
border-bottom: 1px solid #999;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: fixed;
top:60;
z-index: 10
}
.nav-bar{
font-size: 15fp;
height: 100%;
border-bottom: 0;
}
.nav-bars .nav-bar_active{
color: red;
font-size: 16fp;
font-weight: 608;
border-bottom: 1px solid red;
height: 100%;
}
.news-list{
flex-direction: column;
padding-bottom: 4%;
}
.news-item{
flex-direction: row;
height: 100vp;
background-color: azure;
}
.news-item .news-left{
height:100%;
width: 30%;
padding: 8vp;
}
.news-item .news-right{
width: 70%;
flex-direction: column;
justify-content: space-around;
}
.news-item .title{
font-size: 15fp;
max-lines: 2;
text-overfLow: ellipsis;
text-align: center;
color: #de0d2e;
font-weight: 600;
line-height: 18fp;
}
.news-item .abstract{
font-size: 12fp;
text-overfLow: ellipsis;
max-lines: 4;
text-indent: 24fp;
line-neight: 16fp;
}
.tabs_container {
display: flex;
justify-content: space-around;
flex-direction: row; c
align-items: center;
}
.tabs_container {
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
width: 100%;
height: 9% ;
border-top: 1px solid #333;
position: fixed;
background-color: #fff;
z-index: 10;
bottom: 0;
}
.tab{
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.tab_image{
height: 26px;
width: 26px;
margin-top: 8px;
}
.title {
font-size: 15px;
font-weight: 500;
text-align: center;
width: 100%;
height: 30%;
margin-bottom: 3px;
}js部分：
import router from '@system.router';
import fetch from '@system.fetch';
import prompt from '@system,prompt"
export default {
data: {
barArray:[
{
content:'热点'，
className:'nav-bar_active'
}，
{
content:'社会'，
className:'nav-bar'
}，
{
content:'娱乐'
className:'nav-bar'
}，
{
content:'体育'
className:'nav-bar'
},
{
content:'美文'，
className:'nav-bar'
}，
{
content:'科技'，
className:'nav-bar'
}，
{
content:'财经'，
className:'nav-bar'
}，
{
content:'时尚'
className:'nav-bar'
}],
array:[
{
'title':'首页',
'imageUrl':'/common/images/home.png',
'image2url':'/common/images/home_active.png'
},
{
'title':'热搜榜',
'imageUrl':'/common/images/hot.png',
'image2url':'/common/images/hot_active.png'
},
{
'titte':'我的'
'imageUrl':'/common/images/user.png',
'image2url':'/common/images/user_active.png'
}
],
newsData:[],
newsDataSlice:[],
type:0,
searchText:' ',
items_avatar:[],
flag:true
},
changeBar (num){
this.barArray.forEach(function(v){v.className='nav-bar'})
this.barArray[num].className='nav-bar_active';
this.type=num;
this. getNews(this.type);
},
getNews(type){
var that=this;
let url='http://localhost:3001/api/news_list/'+type;
fetch.fetch({
url: url,
success: function(res) {
that.newsDataSlice=JSON.parse(res.data).data;//15条数据
that.newsData=that.newsDataSlice.slice(0,10);//10条数据
that.newsData.forEach(function(v,i){
that.items_avatar.push(v.media_info.avatar_url);
}),
},
fail: function() {
console.info("fetch fail");
},
complete:function(){
console.info("fetch complete");
}
});
},
lazyLoad(){
if(this.flag){
prompt.showToast({
message:"加载数据"
});
setTimeout(() =>{
this.newsData=this.newsDataSlice//15条数据
},3000);
this.flag=false//只执行一次
}
},
sendMsg(num){
num==1?router.replace({uri:'pages/topSearch/topSearch'}):
router.replace({uri:'pages/user/user'});
},
}五、反思：
此次项目就此结束，即使实施的时间不是很长，但是这个过程中仍需要一段时间去对鸿蒙开发所涉及到的技术进行学习。在学习的过程中，我逐渐认识得到了我自身存在的一些不足，很显然，该项目仍有很多不成熟，在项目设计过程中有许多技术缺陷存在，以后会继续努力学习，不断完善项目。
标签：江鸟,bar,鸿蒙,app,height,content,width,nav,font From： https://blog.51cto.com/u_16423863/8749729