日本精品视频一区二区,欧美日本一区二区留学生,婷婷国产熟女91

這是一篇講解如何實(shí)現(xiàn)基于鴻蒙 JS的簡單的每日新聞。

可滾動(dòng)區(qū)域

在許多場景中，頁面會(huì)有一塊區(qū)域是可滾動(dòng)的，比如這樣一個(gè)簡單的每日新聞模塊：

上面的新聞?lì)愋褪且粔K可橫向滾動(dòng)的區(qū)域，下方新聞列表是一塊可豎向滾動(dòng)的區(qū)域。

在鴻蒙 js 組件中，想要實(shí)現(xiàn)可滾動(dòng)的區(qū)域，則是使用 list 組件。list 僅支持豎向滾動(dòng)，橫向滾動(dòng)要用 tabs。

list + list-item

這里以本地新聞模塊為例，數(shù)據(jù)請(qǐng)求自天行數(shù)據(jù)接口：

https://www.tianapi.com/apiview/154

上方為一個(gè)搜索框，下方是新聞列表。搜索框給了固定高度，那么怎樣讓新聞列表能夠占滿屏幕剩余部分呢？

只需將父容器設(shè)置 flex 布局，list 設(shè)置 flex：1 即可。list 下直接放 list-item，在總高度超出 list 的高度后，即可上下滾動(dòng)。

hml：

 










{{$item.title}}



{{$item.source}}


{{$item.ctime}}

css：

/*本地新聞*/
.searchView{
width:100%;
height:140px;
background-color:#f0f0f0;
display:flex;
align-items:center;
}
.searchView>image{
margin:040px040px;
height:60px;
width:60px;
}
.searchView>input{
margin-right:40px;
}
.localView{
width:100%;
flex:1;
display:flex;
flex-direction:column;
}
.localContent{
margin-left:20px;
}
.newsItem{
width:100%;
height:240px;
border-bottom:1pxsolid#bbbbbb;
display:flex;
align-items:center;
}
.newsContent{
display:flex;
flex-direction:column;
margin-right:20px;
margin-left:20px;
}
.newsContent>text{
margin-top:20px;
height:140px;
font-size:34px;
color:#333333;
}
.newsDesc{
height:60px;
line-height:60px;
display:flex;
justify-content:space-between;
}
.newsDesc>text{
font-size:28px;
color:#777777;
}

js：

searchLocalNews(){
leturl='http://api.tianapi.com/areanews/index?key=xxxx&areaname=江蘇';
if(this.searchWord){
url=url+'&word'+this.searchWord;
}
fetch.fetch({
url:url,
responseType:'json',
success:res=>{
letdata=JSON.parse(res.data);
this.localNews=data.newslist;
}
})
},

新聞列表可滾動(dòng)，且不會(huì)影響搜索框的位置。

list + list-item-group + list-item

list 組件的子元素還可以是 list-item-group，顧名思義應(yīng)是分組列表項(xiàng)，list-item 作為 list-item-group 的子元素。

試用示例：






分組1子項(xiàng)1




分組1子項(xiàng)2




分組1子項(xiàng)3






分組2子項(xiàng)1




分組2子項(xiàng)2




分組2子項(xiàng)3

.manageList{
height:100%;
width:100%;
}
.list-item-group{
width:100%;
height:450px;
}
.list-item{
width:100%;
height:150px;
display:flex;
justify-content:center;
align-items:center;
border-bottom:1pxsolidgray;
}
.list-item>text{
line-height:100px;
}

可以看出，list-item-group 是可折疊的列表分組，且默認(rèn)是折疊的。點(diǎn)擊右側(cè)小箭頭可展開列表，如果 list-item-group 給了高度，則折疊和展開后這一塊區(qū)域的高度不變。在折疊時(shí)，展示第一個(gè) list-item 的內(nèi)容。那么如果每一個(gè) list-item-group 中 list-item 數(shù)目不固定，在展開后的布局就會(huì)很難看。如下：

其實(shí)不定義 list-item-group 的高度即可，折疊高度為 list-item 的高度，展開后高度自適應(yīng)增長，超出 list 高度可以滾動(dòng)，功能還是很強(qiáng)大的。更改 css 后的效果如下：

這種分組的列表，可以制作一個(gè)簡單的后臺(tái)管理系統(tǒng)菜單界面。這里我將菜單數(shù)據(jù)文件、圖片文件放入 nginx 服務(wù)器的目錄中，再通過內(nèi)網(wǎng)穿透訪問資源。注意數(shù)據(jù)的格式，list-item-group 和 list-item 之間存在父級(jí)標(biāo)簽關(guān)系，故數(shù)據(jù)中也應(yīng)存在父級(jí)關(guān)系。 list-item-group 展示的內(nèi)容是其下第一個(gè) list-item，這里用一個(gè)兩重 for 循環(huán)實(shí)現(xiàn)：

manage.json：

{
"manageList":[
{
"name":"組織管理",
"icon":"http://milkytea.free.idcfengye.com/images/christools/icon/org.png",
"subList":[
{
"name":"查詢組織",
"icon":"http://milkytea.free.idcfengye.com/images/christools/icon/search.png"
},
{
"name":"添加組織",
"icon":"http://milkytea.free.idcfengye.com/images/christools/icon/add.png"
},
{
"name":"刪除組織",
"icon":"http://milkytea.free.idcfengye.com/images/christools/icon/delete.png"
}
]
},
{
"name":"人員管理",
"icon":"http://milkytea.free.idcfengye.com/images/christools/icon/person.png",
"subList":[
{
"name":"查詢?nèi)藛T",
"icon":"http://milkytea.free.idcfengye.com/images/christools/icon/search.png"
},
{
"name":"添加人員",
"icon":"http://milkytea.free.idcfengye.com/images/christools/icon/add.png"
},
{
"name":"批量導(dǎo)入人員",
"icon":"http://milkytea.free.idcfengye.com/images/christools/icon/add.png"
},
{
"name":"刪除人員",
"icon":"http://milkytea.free.idcfengye.com/images/christools/icon/delete.png"
},
{
"name":"修改人員",
"icon":"http://milkytea.free.idcfengye.com/images/christools/icon/update.png"
}
]
},
{
"name":"卡片管理",
"icon":"http://milkytea.free.idcfengye.com/images/christools/icon/card.png",
"subList":[
{
"name":"開卡",
"icon":"http://milkytea.free.idcfengye.com/images/christools/icon/add.png"
},
{
"name":"退卡",
"icon":"http://milkytea.free.idcfengye.com/images/christools/icon/delete.png"
}
]
}
]
}

hml：

 






{{$item.name}}




{{value.name}}

js：

getManageList(){
leturl="http://milkytea.free.idcfengye.com/text/manage.json";
fetch.fetch({
url:url,
responseType:'json',
success:res=>{
letdata=JSON.parse(res.data);
this.manageList=data.manageList;
}
})
}

審核編輯：湯梓紅

聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴

JS

JS

+關(guān)注

關(guān)注
0

文章
79

瀏覽量
18990
組件

組件

+關(guān)注

關(guān)注
1

文章
572

瀏覽量
19017
鴻蒙

鴻蒙

+關(guān)注

關(guān)注
60

文章
2963

瀏覽量
45883

原文標(biāo)題：鴻蒙上實(shí)現(xiàn)簡單的“每日新聞”

文章出處：【微信號(hào)：gh_834c4b3d87fe，微信公眾號(hào)：OpenHarmony技術(shù)社區(qū)】歡迎添加關(guān)注！文章轉(zhuǎn)載請(qǐng)注明出處。

搜索歷史

鴻蒙上實(shí)現(xiàn)簡單的“每日新聞”

評(píng)論