国产一区视频在线播放,夜夜九一干

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

可滾動區(qū)域

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

上面的新聞類型是一塊可橫向滾動的區(qū)域，下方新聞列表是一塊可豎向滾動的區(qū)域。

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

list + list-item

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

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

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

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

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;
}
})
},

新聞列表可滾動，且不會影響搜索框的位置。

list + list-item-group + list-item

list 組件的子元素還可以是 list-item-group，顧名思義應是分組列表項，list-item 作為 list-item-group 的子元素。

試用示例：






分組1子項1




分組1子項2




分組1子項3






分組2子項1




分組2子項2




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

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

這種分組的列表，可以制作一個簡單的后臺管理系統(tǒng)菜單界面。這里我將菜單數(shù)據(jù)文件、圖片文件放入 nginx 服務器的目錄中，再通過內(nèi)網(wǎng)穿透訪問資源。注意數(shù)據(jù)的格式，list-item-group 和 list-item 之間存在父級標簽關(guān)系，故數(shù)據(jù)中也應存在父級關(guān)系。 list-item-group 展示的內(nèi)容是其下第一個 list-item，這里用一個兩重 for 循環(huán)實現(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":"批量導入人員",
"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)載。文章觀點僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學習之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。舉報投訴

JS

JS

+關(guān)注

關(guān)注
0

文章
80

瀏覽量
19107
組件

組件

+關(guān)注

關(guān)注
1

文章
603

瀏覽量
19070
鴻蒙

鴻蒙

+關(guān)注

關(guān)注
60

文章
3031

瀏覽量
46192

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

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

日B视频亚洲,啪啪啪网站一区二区,91色情精品久久,日日噜狠狠色综合久,超碰人妻少妇97在线,999青青视频,亚洲一区二卡,让本一区二区视频,日韩网站推荐

搜索歷史

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

評論