鴻蒙的橫向滾動(dòng)菜單和分組Group列表菜單和fetch請(qǐng)求加載聚合數(shù)據(jù)

作者：noutsider 2021-01-26 09:50:06

文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請(qǐng)前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com/#zz

https://harmonyos.51cto.com/#zz

本文的項(xiàng)目是通過(guò)遠(yuǎn)程調(diào)用聚合數(shù)據(jù)制作一個(gè)新聞頁(yè)面.首先要明確以下幾點(diǎn):

1.頁(yè)面加載的時(shí)候用戶點(diǎn)擊加載瀏覽什么服務(wù)器就加載什么,若一下全部加載出來(lái)不僅對(duì)頁(yè)面布局有負(fù)擔(dān),而且對(duì)服務(wù)器的負(fù)載也很大,造成服務(wù)器資源浪費(fèi).

2.思路過(guò)程(以制作首頁(yè)為例): onInit首先加載拿到首頁(yè)數(shù)據(jù);用戶點(diǎn)擊那個(gè)菜單加載那個(gè)菜單的數(shù)據(jù).

項(xiàng)目過(guò)程如下:

1.導(dǎo)入鴻蒙的網(wǎng)絡(luò)請(qǐng)求模塊fetch (上篇文章也講到) 這里需要重點(diǎn)注意的是:一定要到config.json中去看有沒(méi)有配置二級(jí)域名不然看不到數(shù)據(jù).例如我這里是v.juhe.cn 下圖:

2.因?yàn)轼櫭蓻](méi)有可視化窗口 ,因此我們可以制作一個(gè)調(diào)試可視化窗口.調(diào)試完成后再將其去掉 . 這個(gè)窗口的目的僅是讓自己通過(guò)可視化窗口清楚明了的看到是否成功拿到數(shù)據(jù),便于我們更好的跟蹤和調(diào)試.(點(diǎn)擊事件changemenu跳轉(zhuǎn)到j(luò)s中將當(dāng)前點(diǎn)擊的菜單項(xiàng)賦值給currentIndex就做制作一個(gè)調(diào)試窗口)具體代碼及標(biāo)注以下會(huì)詳細(xì)給出. 展示想過(guò)如下圖:

模擬器中的字樣來(lái)自于聚合數(shù)據(jù)給定的樣式:

js業(yè)務(wù)邏輯層:

import fetch from '@system.fetch'; 
export default { 
    data: { 
        title:'', 
        currentIndex:0, 
        type:"", 
        bookdatas:[],  //申明一個(gè)數(shù)組 
       menus:["首頁(yè)","新聞","影視","音樂(lè)","天氣","生活","體育","電競(jìng)","娛樂(lè)","美食"] 
    }, 
    onInit() { 
         
 
        fetch.fetch({ 
            url:"http://v.juhe.cn/toutiao/index?type=top&key=401162c3e198047abc4d73d6f95aabbe", 
            //v.juhe.cn一定要到config.json中去看有沒(méi)有配置二級(jí)域名  
            responseType:"json", 
            success:(resp)=>{ 
                let datas=JSON.parse(resp.data);   //轉(zhuǎn)換成json數(shù)據(jù)格式   
                this.title=datas.reason; 
                this.bookdatas=datas.result.data; 
               
 
            } 
 
        } 
) 
 
    }, 
    changemenu(event){ 
           let clickindex=event.index; 
           this.currentIndex=clickindex ; //當(dāng)前點(diǎn)擊的菜單項(xiàng)賦值給currentIndex 
           this.type=typeof clickindex; 
        if(clickindex==0) 
           { 
 
           } 
         else if(clickindex==1) 
          { 
 
          } 
    } 
}

頁(yè)面渲染:

<div class="container"> 
    <!--鴻蒙沒(méi)有橫向和垂直的滾頂視圖組件--> 
    <tabs class="tabs" index="{{currentIndex}}" vertical="false" onchange="changemenu"> 
        <tab-bar class="tab-bar" mode="scrollable"> 
            <block for="{{menus}}"> 
                <text>{{$item}}</text> 
            </block> 
        </tab-bar> 
        <tab-content class="tab-content" scrollable="true"> 
            <div class="oneview"> 
                <list class="listview">              //運(yùn)用列表展示數(shù)據(jù) 
                    <block for="{{bookdatas}}"> 
                        <list-item class="list-item"> 
                            <text>{{$item.title}}</text> 
                        </list-item> 
                    </block> 
                </list> 
            </div> 
            <div class="twoview"> 
                <text>two</text> 
            </div> 
        </tab-content> 
    </tabs> 
     <div class="info"> 
         <text class="txtview">{{currentIndex}} </text>  //返回當(dāng)前標(biāo) 
         <text class="txtview">{{type}} </text>   //返回當(dāng)前下表的數(shù)值類型 
         <text class="txtview">{{title}} </text>   //是否成功獲取數(shù)據(jù) 
     </div> 
</div>

css屬性設(shè)置:

.container{ 
    width: 100%; 
    height: 1200px; 
    background-color: palegreen ; 
    display: flex; 
    flex-direction: column; 
} 
.tabs{ 
    width: 100%; 
 
} 
.tab-content{ 
    width: 100%; 
    height: 80%; 
    background-color: green; 
} 
.oneview{ 
    width: 100%; 
    height: 100%; 
    background-color: white; 
} 
.twoview{ 
    width: 100%; 
    height: 100%; 
    background-color: skyblue; 
} 
.info{ 
    width: 100%; 
    height: 20%; 
    border:1px solid red; 
} 
.txtview{ 
    font-size: 50px; 
    color: red; 
} 
.listview{ 
    width: 100%; 
    height: 100%; 
} 
.list-item{ 
    width: 100%; 
    height: 20%; 
    border: 1px solid red; 
}

最后再?gòu)?qiáng)調(diào)一點(diǎn) 在調(diào)用聚合數(shù)據(jù)的時(shí)候代碼的格式一定要和聚合給定的格式相同,通俗的來(lái)講就是例如:我這里想獲取的是是result中的data中的title的數(shù)據(jù)(見(jiàn)下圖) 因此我們同樣要將獲取的數(shù)組放到申明的bookdatas數(shù)組中