建站
咨詢
售后
建站咨詢
新聞中心
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos./#zz
1、可滾動(dòng)區(qū)域
在許多場(chǎng)景中，頁(yè)面會(huì)有一塊區(qū)域是可滾動(dòng)的，比如這樣一個(gè)簡(jiǎn)單的每日新聞模塊：
上面的新聞?lì)愋褪且粔K可橫向滾動(dòng)的區(qū)域，下方新聞列表是一塊可豎向滾動(dòng)的區(qū)域。在微信小程序中，使用scroll-view組件即可實(shí)現(xiàn)。那么在鴻蒙js組件中，想要實(shí)現(xiàn)可滾動(dòng)的區(qū)域，則是使用list組件。list僅支持豎向滾動(dòng)，橫向滾動(dòng)要用tabs，將在下篇博客講解。
2、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: 0 40px 0 40px;
- 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: 1px solid #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() {
- let url = '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 => {
- let data = JSON.parse(res.data);
- this.localNews = data.newslist;
- }
- })
- },
新聞列表可滾動(dòng)，且不會(huì)影響搜索框的位置。
3、list + list-item-group + list-item
list組件的子元素還可以是list-item-group，顧名思義應(yīng)是分組列表項(xiàng)，list-item作為list-item-group的子元素。隨便寫一點(diǎn)看一看：
- 分組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: 1px solid gray;
- }
- .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中l(wèi)ist-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:
{{ $item.name }} {{ value.name }}
js:
- getManageList() {
- let url = "http://milkytea.free.idcfengye.com/text/manage.json";
- fetch.fetch({
- url: url,
- responseType: 'json',
- success: res => {
- let data = JSON.parse(res.data);
- this.manageList = data.manageList;
- }
- })
- }
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos./#zz
名稱欄目：從微信小程序到鴻蒙JS開(kāi)發(fā)【04】-list組件
分享鏈接：http://fisionsoft.com.cn/article/djesscs.html
