鴻蒙OS 添加外部容器

2020-09-18 13:42 更新

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

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)。具體的使用示例如下:

  1. <!-- xxx.hml -->
  2. <list class="list">
  3. <list-item type="listItem" for="{{textList}}">
  4. <text class="desc-text">{{$item.value}}</text>
  5. </list-item>
  6. </list>

  1. /* xxx.css */
  2. .desc-text {
  3. width: 683.3px;
  4. font-size: 35.4px;
  5. color: #000000;
  6. }

  1. // xxx.js
  2. export default {
  3. data: {
  4. textList: [{value: 'JS FA'}],
  5. },
  6. }

為避免示例代碼過長(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。具體的使用示例如下:

  1. <!-- xxx.hml -->
  2. <tabs>
  3. <tab-bar class="tab-bar">
  4. <text style="color: #000000">tab-bar</text>
  5. </tab-bar>
  6. <tab-content>
  7. <image src="{{tabImage}}"></image>
  8. </tab-content>
  9. </tabs>

  1. /* xxx.css */
  2. .tab-bar {
  3. background-color: #f2f2f2;
  4. width: 720px;
  5. }

  1. // xxx.js
  2. export default {
  3. data: {
  4. tabImage: '/common/image.png',
  5. },
  6. }

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

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)