鴻蒙OS 添加外部容器

要將頁(yè)面的基本元素組裝在一起，需要使用容器組件。在頁(yè)面布局中常用到三種容器組件，分別是 div、list 和 tabs。在頁(yè)面結(jié)構(gòu)相對(duì)簡(jiǎn)單時(shí)，可以直接用 div 作為容器，因?yàn)?div 作為單純的布局容器，使用起來(lái)更為方便，可以支持多種子組件。

List 組件

當(dāng)頁(yè)面結(jié)構(gòu)較為復(fù)雜時(shí)，如果使用 div 循環(huán)渲染，容易出現(xiàn)卡頓，因此推薦使用 list 組件代替 div 組件實(shí)現(xiàn)長(zhǎng)列表布局，從而實(shí)現(xiàn)更加流暢的列表滾動(dòng)體驗(yàn)。但是， list 組件僅支持 list-item 作為子組件，因此使用 list 時(shí)需要留意 list-item 的注意事項(xiàng)。具體的使用示例如下：

<!-- xxx.hml -->
<list class="list">
  <list-item type="listItem" for="{{textList}}">
    <text class="desc-text">{{$item.value}}</text>
  </list-item>
</list>

/* xxx.css */
.desc-text {
  width: 683.3px;
  font-size: 35.4px;
  color: #000000;
}

// xxx.js
export default {
  data: {
    textList:  [{value: 'JS FA'}],
  },
}

為避免示例代碼過(guò)長(zhǎng)，以上示例的list中只包含一個(gè)list-item，list-item中只有一個(gè)text組件。在實(shí)際應(yīng)用中可以在list中加入多個(gè)list-item，同時(shí)list-item下可以包含多個(gè)其他子組件。

Tabs組件

當(dāng)頁(yè)面經(jīng)常需要?jiǎng)討B(tài)加載時(shí)，推薦使用tabs組件。tabs組件支持change事件，在頁(yè)簽切換后觸發(fā)。tabs組件僅支持一個(gè)tab-bar和一個(gè)tab-content。具體的使用示例如下：

<!-- xxx.hml -->
<tabs>
  <tab-bar class="tab-bar">
    <text style="color: #000000">tab-bar</text>
  </tab-bar>
  <tab-content>
    <image src="{{tabImage}}"></image>
  </tab-content>    
</tabs>    

/* xxx.css */
.tab-bar {
  background-color: #f2f2f2;
  width: 720px;
}

// xxx.js
export default {
  data: {
    tabImage: '/common/image.png',
  },
}

tab-content組件用來(lái)展示頁(yè)簽的內(nèi)容區(qū)，高度默認(rèn)充滿tabs剩余空間。tab-content支持scrollable屬性，詳見(jiàn)tab-content。