【HarmonyOS Next之旅】兼容JS的类Web开发 -＞ 常见组件(一)
zhezhongyun 2025-06-09 07:20 16 浏览
目录
1 -> List
1.1 -> 创建List组件
1.2 -> 添加滚动条
1.3 -> 添加侧边索引栏
1.4 -> 实现列表折叠和展开
1.5 -> 场景示例
2 -> dialog
2.1 -> 创建Dialog组件
2.2 -> 设置弹窗响应
2.3 -> 场景示例
3 -> form
3.1 -> 创建Form组件
3.2 -> 实现表单缩放
3.3 -> 设置Form样式
3.4 -> 添加响应事件
3.5 -> 场景示例
编辑
1 -> List
List是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。
1.1 -> 创建List组件
在pages/index目录下的hml文件中创建一个List组件。
<!-- index.hml -->
<div class="container">
<list>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
</list>
</div>/* test.css */
.container {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
}
.listItem{
height: 20%;
background-color:#d2e0e0;
margin-top: 20px;
}编辑
说明
- <list-item-group>是<list>的子组件，实现列表分组功能，不能再嵌套<list>，可以嵌套<list-item>。
- <list-item>是<list>的子组件，展示列表的具体项。
1.2 -> 添加滚动条
设置scrollbar属性为on即可在屏幕右侧生成滚动条，实现长列表或者屏幕滚动等效果。
<!-- index.hml -->
<div class="container">
<list class="listCss" scrollbar="on" >
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
</list>
</div> /* index.css */
.container {
flex-direction: column;
background-color: #F1F3F5;
}
.listItem{
height: 20%;
background-color:#d2e0e0;
margin-top: 20px;
}
.listCss{
height: 100%;
scrollbar-color: #8e8b8b;
scrollbar-width: 50px;
}编辑
1.3 -> 添加侧边索引栏
设置indexer属性为自定义索引时，索引栏会显示在列表右边界处，indexer属性设置为true,默认为字母索引表。
<!-- index.hml -->
<div class="container">
<list class="listCss" indexer="{{['#','1','2','3','4','5','6','7','8']}}" >
<list-item class="listItem" section="#" ></list-item>
</list>
</div>/* index.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
}
.listCss{
height: 100%;
flex-direction: column;
columns: 1
}编辑
说明
- indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。
- indexer可以自定义索引表，自定义时"#"必须要存在。
1.4 -> 实现列表折叠和展开
为List组件添加groupcollapse和groupexpand事件实现列表的折叠和展开。
<!-- index.hml -->
<div class="doc-page">
<list style="width: 100%;" id="mylist">
<list-item-group for="listgroup in list" id="{{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand">
<list-item type="item" style="background-color:#FFF0F5;height:95px;">
<div class="item-group-child">
<text>One---{{listgroup.value}}</text>
</div>
</list-item>
<list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true">
<div class="item-group-child">
<text>Primary---{{listgroup.value}}</text>
</div>
</list-item>
</list-item-group>
</list>
</div>/* index.css */
.doc-page {
flex-direction: column;
background-color: #F1F3F5;
}
list-item{
margin-top:30px;
}
.top-list-item {
width:100%;
background-color:#D4F2E7;
}
.item-group-child {
justify-content: center;
align-items: center;
width:100%;
}// test.js
import prompt from '@system.prompt';
export default {
data: {
direction: 'column',
list: []
},
onInit() {
this.list = []
this.listAdd = []
for (var i = 1; i <= 2; i++) {
var dataItem = {
value: 'GROUP' + i,
};
this.list.push(dataItem);
}
},
collapse(e) {
prompt.showToast({
message: 'Close ' + e.groupid
})
},
expand(e) {
prompt.showToast({
message: 'Open ' + e.groupid
})
}
}编辑
说明
- groupcollapse和groupexpand事件仅支持list-item-group组件使用。
1.5 -> 场景示例
在本场景中，可以根据字母索引表查找对应联系人。
<!-- index.hml -->
<div class="doc-page">
<text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;">
<span>Contacts</span>
</text>
<list class="list" indexer="true">
<list-item class="item" for="{{namelist}}" type="{{$item.section}}" section="{{$item.section}}">
<div class="container">
<div class="in-container">
<text class="name">{{$item.name}}</text>
<text class="number">18888888888</text>
</div>
</div>
</list-item>
<list-item type="end" class="item">
<div style="align-items:center;justify-content:center;width:750px;">
<text style="text-align: center;">Total: 10</text>
</div>
</list-item>
</list>
</div>/* index.css */
.doc-page {
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
}
.list {
width: 100%;
height: 90%;
flex-grow: 1;
}
.item {
height: 120px;
padding-left: 10%;
border-top: 1px solid #dcdcdc;
}
.name {
color: #000000;
font-size: 39px;
}
.number {
color: black;
font-size: 25px;
}
.container {
flex-direction: row;
align-items: center;
}
.in-container {
flex-direction: column;
justify-content: space-around;
}// test.js
export default {
data: {
namelist:[{
name: 'Zoey',
section:'Z'
},{
name: 'Quin',
section:'Q'
},{
name:'Sam',
section:'S'
},{
name:'Leo',
section:'L'
},{
name:'Zach',
section:'Z'
},{
name:'Wade',
section:'W'
},{
name:'Zoe',
section:'Z'
},{
name:'Warren',
section:'W'
},{
name:'Kyle',
section:'K'
},{
name:'Zaneta',
section:'Z'
}]
},
onInit() {
}
}编辑
2 -> dialog
Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要或用户必须关注的信息或操作。
2.1 -> 创建Dialog组件
在pages/index目录下的hml文件中创建一个Dialog组件，并添加Button组件来触发Dialog。Dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。
<!-- test.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId" dragable="true">
<div class="content">
<text>this is a dialog</text>
</div>
</dialog>
<button value="click me" onclick="openDialog"></button>
</div>/* test.css */
.doc-page {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
.dialogClass{
width: 80%;
height: 250px;
margin-start: 1%;
}
.content{
width: 100%;
height: 250px;
justify-content: center;
background-color: #e8ebec;
border-radius: 20px;
}
text{
width: 100%;
height: 100%;
text-align: center;
}
button{
width: 70%;
height: 60px;
}/* test.js */
export default {
//Touch to open the dialog box.
openDialog(){
this.$element('dialogId').show()
},
}编辑
2.2 -> 设置弹窗响应
点击页面上非Dialog的区域时，将触发cancel事件而关闭弹窗。同时也可以通过对Dialog添加show和close方法来显示和关闭弹窗。
<!-- test.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId" oncancel="canceldialog">
<div class="dialogDiv">
<text>dialog</text>
<button value="confirm" onclick="confirmClick"></button>
</div>
</dialog>
<button value="click me" onclick="openDialog"></button>
</div>/* test.css */
.doc-page {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
.dialogClass{
width: 80%;
height: 300px;
margin-start: 1%;
}
.dialogDiv{
width: 100%;
flex-direction: column;
justify-content: center;
align-self: center;
}
text{
height: 100px;
align-self: center;
}
button{
align-self: center;
margin-top: 20px;
width: 60%;
height: 80px;
}/* test.js */
import prompt from '@system.prompt';
export default {
canceldialog(e){
prompt.showToast({
message: 'dialogCancel'
})
},
openDialog(){
this.$element('dialogId').show()
prompt.showToast({
message: 'dialogShow'
})
},
confirmClick(e) {
this.$element('dialogId').close()
prompt.showToast({
message: 'dialogClose'
})
},
}编辑
说明
- 仅支持单个子组件。
- Dialog属性、样式均不支持动态更新。
- Dialog组件不支持focusable、click-effect属性。
2.3 -> 场景示例
在本场景中，可以通过Dialog组件实现一个日程表。弹窗在打开状态下，利用Textarea组件输入当前日程，点击确认按钮后获取当前时间并保存输入文本。最后以列表形式将各日程进行展示。
<!-- test.hml -->
<div class="doc-page">
<text style="margin-top: 60px;margin-left: 30px;">
<span>{{date}} events</span>
</text>
<div class="btndiv">
<button type="circle" class="btn" onclick="addschedule">+</button>
</div>
<!-- for Render events data -->
<list style="width: 100%;">
<list-item type="item" for="schedulelist" style="width:100%;height: 200px;">
<div class="schedulediv">
<text class="text1">{{date}} event</text>
<text class="text2">{{$item.schedule}}</text>
</div>
</list-item>
</list>
<dialog id="datedialog" oncancel="canceldialog" >
<div class="dialogdiv">
<div class="innertxt">
<text class="text3">{{date}}</text>
<text class="text4">New event</text>
</div>
<textarea placeholder="Event information" onchange="getschedule" class="area" extend="true"></textarea>
<div class="innerbtn">
<button type="text" value="Cancel" onclick="cancelschedule" class="btntxt"></button>
<button type="text" value="OK" onclick="setschedule" class="btntxt"></button>
</div>
</div>
</dialog>
</div>/* test.css */
.doc-page {
flex-direction: column;
background-color: #F1F3F5;
}
.btndiv {
width: 100%;
height: 200px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.btn {
radius:60px;
font-size: 100px;
background-color: #1E90FF;
}
.schedulediv {
width: 100%;
height: 200px;
flex-direction: column;
justify-content: space-around;
padding-left: 55px;
}
.text1 {
color: #000000;
font-weight: bold;
font-size: 39px;
}
.text2 {
color: #a9a9a9;
font-size: 30px;
}
.dialogdiv {
flex-direction: column;
align-items: center;
}
.innertxt {
width: 320px;
height: 160px;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.text3 {
font-family: serif;
color: #1E90FF;
font-size: 38px;
}
.text4 {
color: #a9a9a9;
font-size: 33px;
}
.area {
width: 320px;
border-bottom: 1px solid #1E90FF;
}
.innerbtn {
width: 320px;
height: 120px;
justify-content: space-around;
}
.btntxt {
text-color: #1E90FF;
}/* test.js */
var info = null;
import prompt from '@system.prompt';
import router from '@system.router';
export default {
data: {
curYear:'',
curMonth:'',
curDay:'',
date:'',
schedule:'',
schedulelist:[]
},
onInit() {
// Obtain the current date.
var date = new Date();
this.curYear = date.getFullYear();
this.curMonth = date.getMonth() + 1;
this.curDay = date.getDate();
this.date = this.curYear + '-' + this.curMonth + '-' + this.curDay;
this.schedulelist = []
},
addschedule(e) {
this.$element('datedialog').show()
},
canceldialog(e) {
prompt.showToast({
message: 'Event setting canceled.'
})
},
getschedule(e) {
info = e.value
},
cancelschedule(e) {
this.$element('datedialog').close()
prompt.showToast({
message: 'Event setting canceled.'
})
},
// Touch OK to save the data.
setschedule(e) {
if (e.text === '') {
this.schedule = info
} else {
this.schedule = info
var addItem = {schedule: this.schedule,}
this.schedulelist.push(addItem)
}
this.$element('datedialog').close()
}
}编辑
3 -> form
Form是一个表单容器，支持容器内Input组件内容的提交和重置。
说明
从API Version 6开始支持。
3.1 -> 创建Form组件
在pages/index目录下的hml文件中创建一个Form组件。
<!-- test.hml -->
<div class="container">
<form style="width: 100%; height: 20%">
<input type="text" style="width:80%"></input>
</form>
</div>/* test.css */
.container {
width:100%;
height:100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}编辑
3.2 -> 实现表单缩放
为Form组件添加click-effect属性，实现点击表单后的缩放效果。
<!-- test.hml -->
<div class="container">
<form id="formId" class="formClass" click-effect="spring-large">
<input type="text"></input>
</form>
</div>3.3 -> 设置Form样式
通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。
/* test.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
.formClass{
width: 80%;
height: 100px;
padding: 10px;
border: 1px solid #cccccc;
}编辑
3.4 -> 添加响应事件
为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。
<!-- test.hml -->
<div class="container">
<form onsubmit='onSubmit' onreset='onReset' class="form">
<div style="width: 100%;justify-content: center;">
<label>Option 1</label>
<input type='radio' name='radioGroup' value='radio1'></input>
<label>Option 2</label>
<input type='radio' name='radioGroup' value='radio2'></input>
</div>
<div style="width: 100%;justify-content: center; margin-top: 20px">
<input type="submit" value="Submit" style="width:120px; margin-right:20px;" >
</input>
<input type="reset" value="Reset" style="width:120px;"></input>
</div>
</form>
</div>/* index.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-items: center;
align-items: center;
background-color: #F1F3F5;
}
.form{
width: 100%;
height: 30%;
margin-top: 40%;
flex-direction: column;
justify-items: center;
align-items: center;
}/* test.js */
import prompt from '@system.prompt';
export default{
onSubmit(result) {
prompt.showToast({
message: result.value.radioGroup
})
},
onReset() {
prompt.showToast({
message: 'Reset All'
})
}
}编辑
3.5 -> 场景示例
在本场景中，可以选择相应选项并提交或重置数据。
创建Input组件，分别设置type属性为checkbox(多选框)和radio(单选框)，再使用Form组件的onsubmit和onreset事件实现表单数据的提交与重置。
<!-- test.hml -->
<div class="container">
<form onsubmit="formSubmit" onreset="formReset">
<text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
<span > Form </span>
</text>
<div style="flex-direction: column;width: 90%;padding: 30px 0px;">
<text class="txt">Select 1 or more options</text>
<div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
<label target="checkbox1">Option 1</label>
<input id="checkbox1" type="checkbox" name="checkbox1"></input>
<label target="checkbox2">Option 2</label>
<input id="checkbox2" type="checkbox" name="checkbox2"></input>
</div>
<divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
<text class="txt">Select 1 option</text>
<div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
<label target="radio1">Option 1</label>
<input id="radio1" type="radio" name="myradio"></input>
<label target="radio2">Option 2</label>
<input id="radio2" type="radio" name="myradio"></input>
</div>
<divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
<text class="txt">Text box</text>
<input type="text" placeholder="Enter content." style="margin-top: 50px;"></input>
<div style="width: 90%;align-items: center;justify-content: space-between;margin: 40px;">
<input type="submit">Submit</input>
<input type="reset">Reset</input>
</div>
</div>
</form>
</div>/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction:column;
align-items:center;
background-color:#F1F3F5;
}
.txt {
font-size:33px;
font-weight:bold;
color:darkgray;
}
label{
font-size: 20px;
}/* test.js */
import prompt from '@system.prompt';
export default {
formSubmit() {
prompt.showToast({
message: 'Submitted.'
})
},
formReset() {
prompt.showToast({
message: 'Reset.'
})
}
}编辑
感谢各位大佬支持！！！
互三啦！！！
相关推荐
- Chinese vice premier calls for multilateralism at Davos
-
DAVOS,Switzerland,Jan.21(Xinhua)--ChineseVicePremierDingXuexiangdeliveredaspeechatthe...
- 用C++ Qt手把手打造炫酷汽车仪表盘
-
一、项目背景与核心价值在车载HMI（人机交互界面）开发领域，虚拟仪表盘是智能座舱的核心组件。本项目基于C++Qt框架实现一个具备专业级效果的时速表模块，涵盖以下技术要点：Qt图形绘制核心机制（QPa...
- 系列专栏(八):JS的第七种基本类型Symbols
-
ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...
- MFC界面开发工具BCG v31.1 - 增强功能区、工具箱功能
-
点击“了解更多”获取工具亲爱的BCGSoft用户，我们非常高兴地宣布BCGControlBarProfessionalforMFC和BCGSuiteforMFCv31.2正式发布！新版本支...
- 雅居乐上调出售吉隆坡项目保留金，预计亏损扩大至6.64亿元
-
1月2日，雅居乐集团（03383.HK）发布有关出售一家附属公司股权披露交易的补充公告。此前雅居乐集团曾公告，2023年11月8日（交易时段后），集团子公司AgileRealEstateDeve...
- Full text: Address by Vice Premier Ding Xuexiang's at World Economic Forum Annual Meeting 2025
-
DAVOS,Switzerland,Jan.21(Xinhua)--ChineseVicePremierDingXuexiangonTuesdaydeliveredasp...
- 手机性能好不好 GPU玄学曲线告诉你
-
前言各位在看测试者对手机进行评测时或许会见过“安卓玄学曲线”，所谓中的安卓玄学曲线真名为“ProfileGPURendering”。大多数情况下，在系统“开发者选项中被称为“GPU显示配置文件”或...
- 小迈科技 X Hologres:高可用的百亿级广告实时数仓建设
-
通过本文，我们将会介绍小迈科技如何通过Hologres搭建高可用的实时数仓。一、业务介绍小迈科技成立于2015年1月，是一家致力以数字化领先为优势，实现业务高质量自增长的移动互联网科技公司。始...
- vue3新特征和所有的属性，方法汇总及其对应源码分析
-
vue3新特征汇总与源码分析（备注：vue3使用typescript编写）何为应用？constapp=Vue.createApp({})app就是一个应用。应用的配置和应用的API就是app应用...
- China's stability redefines global trade in a volatile era
-
ContainersareunloadedatQingdaoPort,eastChina'sShandongProvince,December10,2024.[Photo/X...
- QML 实现图片帧渐隐渐显轮播
-
前言所谓图片帧渐隐渐显轮播就是，一组图片列表，当前图片逐渐改变透明度隐藏，同时下一张图片逐渐改变透明度显示，依次循环，达到渐隐渐显的效果，该效果常用于图片展示，相比左右自动切换的轮播方式来说，这种方式...
- 前端惊魂夜:我竟在CSS里写出了JavaScript?
-
凌晨两点，写字楼里只剩下我工位上的一盏孤灯。咖啡杯见底，屏幕的光映在疲惫的眼镜片上。为了实现一个极其复杂的动态渐变效果，我翻遍了MDN文档，试遍了所有已知的CSS技巧，却始终差那么一口气。“要是CSS...
- 10 个派上用场的 Flutter 小部件
-
尝试学习一门新语言可能会令人恐惧和厌烦。很多时候，我们希望我们知道早先存在的某些功能。在今天的文章中，我将告诉你我希望早点知道的最方便的颤振小部件。SpacerSpacer创建一个可调整的空白空...
- 让我的 Flutter 代码整洁 10 倍的 5 种
-
如果你曾在Flutter中使用过SingleTickerProviderStateMixin来制作动画，猜猜怎么着？你已经使用过Mixin了——恭喜你，你已经处于一段你甚至不知道的关...
- daisyUI - 主题漂亮、代码纯净!免费开源的 Tailwind CSS 组件库
-
漂亮有特色的CSS组件库，组件代码非常简洁，也支持深度定制主题、定制组件，可以搭配Vue/React等框架使用。关于daisyUIdaisyUI是一款极为流行的CSSUI组件库，...
- 一周热门
- 最近发表
-
- Chinese vice premier calls for multilateralism at Davos
- 用C++ Qt手把手打造炫酷汽车仪表盘
- 系列专栏(八):JS的第七种基本类型Symbols
- MFC界面开发工具BCG v31.1 - 增强功能区、工具箱功能
- 雅居乐上调出售吉隆坡项目保留金，预计亏损扩大至6.64亿元
- Full text: Address by Vice Premier Ding Xuexiang's at World Economic Forum Annual Meeting 2025
- 手机性能好不好 GPU玄学曲线告诉你
- 小迈科技 X Hologres:高可用的百亿级广告实时数仓建设
- vue3新特征和所有的属性，方法汇总及其对应源码分析
- China's stability redefines global trade in a volatile era
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- opacity 属性 (32)
- transition 属性 (33)