古风小说君子以泽,古风名字,完美世界国际版下载

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

可滾動區域

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

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

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

list + list-item

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

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

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

只需將父容器設置 flex 布局，list 設置 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 是可折疊的列表分組，且默認是折疊的。點擊右側小箭頭可展開列表，如果 list-item-group 給了高度，則折疊和展開后這一塊區域的高度不變。在折疊時，展示第一個 list-item 的內容。那么如果每一個 list-item-group 中 list-item 數目不固定，在展開后的布局就會很難看。如下：

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

這種分組的列表，可以制作一個簡單的后臺管理系統菜單界面。這里我將菜單數據文件、圖片文件放入 nginx 服務器的目錄中，再通過內網穿透訪問資源。注意數據的格式，list-item-group 和 list-item 之間存在父級標簽關系，故數據中也應存在父級關系。 list-item-group 展示的內容是其下第一個 list-item，這里用一個兩重 for 循環實現：

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":"查詢人員",
"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;
}
})
}

審核編輯：湯梓紅

聲明：本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人，不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用，如有內容侵權或者其他違規問題，請聯系本站處理。舉報投訴