在线观看www成人影院-在线观看www日本免费网站-在线观看www视频-在线观看操-欧美18在线-欧美1级

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

如何用JS UI框架的List組件畫一個表格?

HarmonyOS開發者 ? 來源:HarmonyOS開發者 ? 作者:九弓子 ? 2021-07-01 10:42 ? 次閱讀

本文作者:九弓子

前端最討厭的事:需要閱讀同事封裝的各種奇怪組件

前端最喜歡的事:分分鐘封裝一個自定義組件

對于以上描述,你是否也有同感?本期我們為大家帶來的是開發者“九弓子”投稿的“如何用JS UI框架的List組件畫一個表格”。

作者通過List組件快速、高效地構建了一個自定義表格。接下來,讓我們一起見證作者是如何遇到問題,解決問題,最終實現開發目標的。希望能給你的HarmonyOS開發之旅帶來一些啟發~

在敲代碼之前,需要大家下載安裝“Huawei DevEco Studio”,安裝指南如下:● Huawei DevEco Studio安裝指南:

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_install-0000001053582415

1

前端總會遇到一種需求 -- 自己畫

不是因為大家想寫組件,而是因為隨著各種千奇百怪網頁需求的出現,即便是繁榮如Web的生態,框架也不夠用。更不用說咱們剛剛出生沒多久的HarmonyOS手機應用開發。表格是頁面中最常用的組件之一,那么如何在JS UI為主的HarmonyOS應用中書寫一個表格呢。既然沒有三方框架加持,我們就先拋離css美化的問題,用List組件做一個極簡表格:

2

制作頁面之前,先確定幾件事

在開發HarmonyOS 的JS UI頁面之前,先要確定這么幾件事。

1) 是否有我們可以利用的組件?

HarmonyOS的JS開發不是Web開發,雖然二者寫法很像,但不是一回事。

2) 不要嘗試去找官方文檔沒有寫的html標簽

官方提供的標簽本身就是組件的另一種體現。

3) 頁面本身沒有Scroll滾動。

如果你書寫的頁面超出屏幕,且外層沒有List組件,是無法滑動屏幕的。

基于以上問題,我們通常會先寫了一個容器(效果如圖1所示),在外層寫一個list標簽負責Y軸縱向的滾動。再寫一個id為table的div,并且給它一個邊框,之后的表格將在這個div內繪制。

《!--hml--》《div class=“container”》 《!--外層的這個list組件負責Y軸縱向滾動--》 《list》 《list-item》 《!--寫了一個id為table的div--》 《div id=“table”》《/div》 《/list-item》 《/list》《/div》

/*css*/.container { padding: 10px;}#table { width: 100%; height: 500px; border: 1px solid #000;/*給table設置了邊框*/}

這時就能在圖1中看到一個方塊:

3

制作過程

1)確定思路因為手機寬度有限,表格過大的話,就需要橫向滾動。所以,我們后面還需要繼續在內層寫入一個 list 組件用來負責X軸橫向的滾動。

2)確定數據結構

表格數據結構,是可視化的二維數組,如下所示:

//jsexport default { data: { //table_data就是我們要制作的表格數據 table_data:[ [“日期/時間”,“2020-12-16”,“2020-12-16”,“2020-12-16”,“2020-12-16”,“2020-12-16”,“2020-12-16”], [“表頭1”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”], [“表頭2”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”], [“表頭3”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”], [“表頭4”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”], [“表頭5”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”], [“表頭6”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”], [“表頭7”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”] ] }}

為了開啟橫向滾動屬性,hml代碼中新增了id為table-row的list組件,并且寫入了一個style。新增了一個for語句,通過for語句循環獲取tabledata里的每個數組,還新增了span item,用于數據綁定。運行效果如圖2所示:

《!--hml--》《div class=“container”》 《list》 《list-item》 《div id=“table”》 《!--新增了一個id為table-row的list組件,并寫入了一個Style--》 《list id=“table-row” style=“flex-direction: row;”》 《!--通過for語句循環獲取table data里的每個數組--》 《list-item for=“(index,item) in table_data”》 《div》 《text》 《!--數據綁定,注意此處綁定的是item,后文會改成綁定item中的value--》 《span》{{ item }}《/span》 《/text》 《/div》 《/list-item》 《/list》 《/div》 《/list-item》 《/list》《/div》

通過發現,頁面的數組全擠在了一起,為了解決這個問題,接下來我們需要把最內層的文本輸出賦予更多css樣式。

4)表格樣式設計

首先,給予X軸橫向list內部每一個list-item一個寬度,讓它們撐開超出屏幕寬度,自然就可以順利滾動。然后,給予內部文本的div一個邊框,讓它們看起來更像一個表格,運行后效果如圖3所示:

《!--hml--》《div class=“container”》 《list》 《list-item》 《div id=“table”》 《list id=“table-row” style=“flex-direction: row;”》 《!--給list內部每個list-item設定一個寬度30%,讓它們撐開超出屏幕寬度--》 《list-item for=“(index,item) in table_data” style=“width: 30%;”》 《!--給內部文本的div一個邊框,讓它看起來像個表格--》 《div style=“border: 1px solid #000;width: 100%;”》 《!--文本排列:居中--》 《text style=“text-align: center;”》 《span》{{ item }}《/span》 《/text》 《/div》 《/list-item》 《/list》 《/div》 《/list-item》 《/list》《/div》

通過發現,橫向滾動已實現,但這個表格是按照一維數組輸出的,只輸出了每個item。接下來新增一個for語句,使數據的輸出為item里面的value值。我們再給內層的div加一個flex彈性換行 ,最后我們再寫一個Css樣式最常用的Flex彈性布局,讓文本的輸出真正按照二維數組來輸出。運行效果圖如圖4所示:

《!--hml--》《div class=“container”》 《list》 《list-item》 《div id=“table”》 《list id=“table-row” style=“flex-direction: row;”》 《list-item for=“(index,item) in table_data” style=“width: 30%;”》 《div class=“row”》 《!--新增了一個for語句,使數據的輸出為item里面的value值--》 《div for=“value in item” class=“col”》 《text》 《!--這里的數據綁定是value值,前文代碼中一直都是item--》 《span》{{ value }}《/span》 《/text》 《/div》 《/div》 《/list-item》 《/list》 《/div》 《/list-item》 《/list》《/div》

/*css*/.container { padding: 10px;}#table { width: 100%; height: 500px; border: 1px solid #000;}//設定彈性布局.row { display: flex ; flex-direction:row; flex-wrap:wrap;}.col { width: 100%; height: 60px; border: 1px solid #000;}

我們目標中的表,但如果數據增多,Y軸無法就滾動查看。這是因為我們的id=table 的div組件,鎖死了高度500px。并且最外層負責Y軸滾動的list組件并沒有一個固定高度,且小于內部元素。

我們給予表格容器 id=table 一個自適應的高度,因為現在的hml中的div不支持高度自動(height:auto)。那么我們需要在//js中先計算需要的高度,然后將值綁定在hml中。

最后的代碼:

//jsexport default { data: { table_data:[ [“日期/時間”,“2020-12-16”,“2020-12-16”,“2020-12-16”,“2020-12-16”,“2020-12-16”,“2020-12-16”,“2020-12-16”,“2020-12-16”,“2020-12-16”,“2020-12-16”,“2020-12-16”,“2020-12-16”], [“表頭1”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”], [“表頭2”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”], [“表頭3”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”], [“表頭4”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”], [“表頭5”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”], [“表頭6”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”], [“表頭7”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”,“10.10”,“15.36”,“58.00”,“66.41”,“20.21”,“22.00”] ], table_height:‘’

}, onInit() { let rowNum = this.table_data[0].length let height = rowNum*60 //我們在css中設計了行高為60像素,在這里計算出高度 this.table_height = height + ‘px’ }}

《!--hml--》《div class=“container”》 《list scrollbar=“on” style=“height: 500px;”》 《list-item》 《!--JS 計算出的高度數據綁定在此--》 《div id=“table” style=“height: {{table_height}};”》 《list id=“table-row” style=“flex-direction: row;”》 《list-item for=“(index,item) in table_data” style=“width: 30%;”》 《div class=“row”》 《div for=“value in item” class=“col”》 《text style=“width: 100%;text-align: center;”》 《span》{{ value }}《/span》 《/text》 《/div》 《/div》 《/list-item》 《/list》 《/div》 《/list-item》 《/list》《/div》

/*css*/.container { padding: 10px;}#table { width: 100%; height: 500px;/* border: 1px solid #000;*/}.row { display: flex ; flex-direction:row; flex-wrap:wrap;}.col { width: 100%; height: 60px; border: 1px solid #000;}

滑動條出現,就解決了數據增多,Y軸無法滑動查看的問題。至此,我們就完成本次的開發目標,用list組件創建一個自定義表格,只需幾行代碼就可以解決,非常便捷和高效。

以上就是本期作者分享的如何用List組件自定義的一個表格,大家可以根據自己的需求,用List組件自定義你想要的表格。學無止境,希望本期分享的內容能給你帶來新的啟發。同時也歡迎更多開發者與我們分享開發成果、技術解讀與經驗心得,說不定下一期的主角就是你哦!

編輯:jq

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

    關注

    8

    文章

    7242

    瀏覽量

    91041
  • JS
    JS
    +關注

    關注

    0

    文章

    78

    瀏覽量

    18400
  • ui
    ui
    +關注

    關注

    0

    文章

    206

    瀏覽量

    21683
  • HarmonyOS
    +關注

    關注

    79

    文章

    2054

    瀏覽量

    32168

原文標題:如何用JS UI框架中的List組件畫一個表格?

文章出處:【微信號:HarmonyOS_Dev,微信公眾號:HarmonyOS開發者】歡迎添加關注!文章轉載請注明出處。

收藏 人收藏

    評論

    相關推薦
    熱點推薦

    UIAbility組件UI的數據同步介紹

    通信。使用EventHub實現UIAbility與UI之間的數據通信需要先獲取EventHub對象,本章節將以此為例進行說明。 在UIAbility中調用eventHub.on()方法注冊自定義
    發表于 05-16 06:10

    創建列表 (List) 介紹,起來看看是做什么的

    應用程序中的常見要求(如通訊錄、音樂列表、購物清單等)。 開發布局 設置主軸方向 List組件主軸默認是垂直方向,即默認情況下不需要手動設置List方向,就可以構建
    發表于 04-30 07:06

    Demo示例: List的使用

    寬度時,子組件主軸方向的間隔取分割線寬度。 initialIndexnumber否設置當前List初次加載時視口起始位置顯示的item的索引值。 默認值:0 說明: 設置為負數或超過了當前List最后
    發表于 04-28 06:49

    Web Components實踐:如何搭建框架無關的AI組件

    年左右各個瀏覽器才實現了Custom Element V1版本。然而,在同時期,諸如Vue和React等組件框架已經開始主導前端
    的頭像 發表于 04-08 11:27 ?252次閱讀
    Web Components實踐:如何搭建<b class='flag-5'>一</b><b class='flag-5'>個</b><b class='flag-5'>框架</b>無關的AI<b class='flag-5'>組件</b>庫

    將DMA與C64x的框架組件結合使用

    電子發燒友網站提供《將DMA與C64x的框架組件結合使用.pdf》資料免費下載
    發表于 10-16 10:29 ?0次下載
    將DMA與C64x的<b class='flag-5'>框架</b><b class='flag-5'>組件</b>結合使用

    何為Teable多維表格數據庫,它僅僅是在線的智能表格嗎?

    表格種創新的數據管理和協作工具,它結合了傳統電子表格的直觀界面與關系數據庫的強大功能。用戶不僅可以像在Excel中樣在二維表格內記錄
    的頭像 發表于 10-14 16:13 ?1143次閱讀

    JS實現簡單的屏幕錄像機

    作者:京東保險 張潔 本文將介紹如何用JS實現簡單的屏幕錄像機。 、錄制準備 創建按鈕 ? Start recording ? 書寫J
    的頭像 發表于 10-09 15:27 ?361次閱讀

    鴻蒙跨端實踐-JS虛擬機架構實現

    在Roma跨端方案中,JS虛擬機是框架的核心,負責執行動態化的JS代碼。在Android平臺采用了基于V8的J2V8,iOS平臺則使用了系統自帶的JSCore,而在HarmonyOS中,由于業界無
    的頭像 發表于 09-30 14:42 ?2890次閱讀
    鴻蒙跨端實踐-<b class='flag-5'>JS</b>虛擬機架構實現

    推薦支持js的嵌入式設備開發平臺

    控制gpio,pwm,藍牙,nfc,二維碼識別,人臉識別,網絡,mqtt,tcp,看門狗,ui等等,支持多線程 也支持多種設備。 以下是代碼示例和效果圖示例 import log from
    發表于 09-04 14:04

    LangChain框架關鍵組件的使用方法

    LangChain是強大的框架,旨在幫助開發人員使用語言模型構建端到端的應用程序。它提供了套工具、組件和接口,可簡化創建由大型語言模型
    的頭像 發表于 08-30 16:55 ?1076次閱讀
    LangChain<b class='flag-5'>框架</b>關鍵<b class='flag-5'>組件</b>的使用方法

    鴻蒙ArkTS容器組件:ListItemGroup

    組件用來展示列表item分組,寬度默認充滿[List]組件,必須配合List組件來使用。
    的頭像 發表于 07-10 09:20 ?1196次閱讀
    鴻蒙ArkTS容器<b class='flag-5'>組件</b>:ListItemGroup

    學習鴻蒙必須要知道的幾個名詞

    HarmonyOS提供了UI(UserInterface,用戶界面)開發框架,即方舟開發框架(ArkUI框架),用于快速搭建漂亮的用戶界
    的頭像 發表于 07-06 08:04 ?750次閱讀
    學習鴻蒙必須要知道的幾個名詞

    鴻蒙ArkTS聲明式組件:ScrollBar

    滾動條組件ScrollBar,用于配合可滾動組件使用,如List、Grid、Scroll。
    的頭像 發表于 07-01 15:52 ?914次閱讀
    鴻蒙ArkTS聲明式<b class='flag-5'>組件</b>:ScrollBar

    鴻蒙開發:【PageAbility組件概述+配置】

    PageAbility是包含UI、提供展示UI能力的應用組件,主要用于與用戶交互。
    的頭像 發表于 06-17 18:05 ?686次閱讀

    鴻蒙Ability Kit(程序框架服務)【應用啟動框架AppStartup】

    `AppStartup`提供了種更加簡單高效的初始化組件的方式,支持異步初始化組件加速應用的啟動時間。使用啟動框架應用開發者只需要分別為待初始化的
    的頭像 發表于 06-10 18:38 ?1073次閱讀
    主站蜘蛛池模板: 国产床戏无遮掩视频播放 | 国产午夜在线观看视频 | 日本不卡在线视频高清免费 | 182.t v香蕉人人网站 | 在线视频亚洲欧美 | 国产视频h| 欧美午夜在线播放 | 奇米米奇777 | 天天看黄 | 天天干夜夜艹 | 深夜视频在线 | 国产在播放一区 | 日本网络视频www色高清免费 | 91高清在线成人免费观看 | 亚洲乱码卡一卡二卡三永久 | 国产色妞妞在线视频免费播放 | 欧美一区二区精品 | 天天做天天爱天天一爽一毛片 | 性欧美xxxx视频在线观看 | 久久久久四虎国产精品 | 天天操免费视频 | 一级欧美日韩 | 伦理一区二区三区 | 国产一级一级片 | www国产永久免费视频看看 | 日本黄色录像 | aaa在线观看 | 久久香蕉国产线看观看亚洲片 | 国产一区二区三区在线观看影院 | 乱j伦小说在线阅读 | 日韩夜夜操| 亚洲六月丁香六月婷婷花 | 大尺度视频网站久久久久久久久 | 午夜神马 | 日本视频www| 免费精品美女久久久久久久久 | 欧美三级不卡在线观线看高清 | 国产一卡二卡3卡4卡四卡在线视频 | xxx86日本人| 年轻护士女三级 | 色www永久免费视频 色y情视频免费看 |