這是一篇講解如何實(shí)現(xiàn)基于鴻蒙 JS的簡(jiǎn)單的每日新聞。
可滾動(dòng)區(qū)域
在許多場(chǎng)景中,頁(yè)面會(huì)有一塊區(qū)域是可滾動(dòng)的,比如這樣一個(gè)簡(jiǎn)單的每日新聞模塊:
上面的新聞?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è)小箭頭可展開(kāi)列表,如果 list-item-group 給了高度,則折疊和展開(kāi)后這一塊區(qū)域的高度不變。在折疊時(shí),展示第一個(gè) list-item 的內(nèi)容。 那么如果每一個(gè) list-item-group 中 list-item 數(shù)目不固定,在展開(kāi)后的布局就會(huì)很難看。 如下:
其實(shí)不定義 list-item-group 的高度即可,折疊高度為 list-item 的高度,展開(kāi)后高度自適應(yīng)增長(zhǎng),超出 list 高度可以滾動(dòng),功能還是很強(qiáng)大的。 更改 css 后的效果如下:
這種分組的列表,可以制作一個(gè)簡(jiǎn)單的后臺(tái)管理系統(tǒng)菜單界面。這里我將菜單數(shù)據(jù)文件、圖片文件放入 nginx 服務(wù)器的目錄中,再通過(guò)內(nèi)網(wǎng)穿透訪問(wèn)資源。 注意數(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":"開(kāi)卡", "icon":"http://milkytea.free.idcfengye.com/images/christools/icon/add.png" }, { "name":"退卡", "icon":"http://milkytea.free.idcfengye.com/images/christools/icon/delete.png" } ] } ] }
hml:
js:
{{$item.name}} {{value.name}}
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; } }) }
審核編輯:湯梓紅
-
JS
+關(guān)注
關(guān)注
0文章
78瀏覽量
18036 -
組件
+關(guān)注
關(guān)注
1文章
499瀏覽量
17774 -
鴻蒙
+關(guān)注
關(guān)注
57文章
2295瀏覽量
42636
原文標(biāo)題:鴻蒙上實(shí)現(xiàn)簡(jiǎn)單的“每日新聞”
文章出處:【微信號(hào):gh_834c4b3d87fe,微信公眾號(hào):OpenHarmony技術(shù)社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論