【HarmonyOS之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(四) -＞ 常见 ...

守听  金牌会员 | 2025-2-12 12:24:38 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 871|帖子 871|积分 2613

目录
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组件。
  1. <!-- index.hml -->
  2. <div class="container">
  3. <list>   
  4.    <list-item class="listItem"></list-item>
  5.    <list-item class="listItem"></list-item>
  6.    <list-item class="listItem"></list-item>
  7.    <list-item class="listItem"></list-item>
  8. </list>
  9. </div>
复制代码
  1. /* test.css */
  2. .container {
  3.   width:100%;
  4.   height:100%;
  5.   flex-direction: column;
  6.   align-items: center;
  7.   background-color: #F1F3F5;
  8. }
  9. .listItem{
  10.   height: 20%;
  11.   background-color:#d2e0e0;
  12.   margin-top: 20px;
  13. }
复制代码

说明


  • <list-item-group>是<list>的子组件，实现列表分组功能，不能再嵌套<list>，可以嵌套<list-item>。
  • <list-item>是<list>的子组件，展示列表的具体项。
1.2 -> 添加滚动条

设置scrollbar属性为on即可在屏幕右侧天生滚动条，实现长列表或者屏幕滚动等效果。
  1. <!-- index.hml -->
  2. <div class="container">
  3.   <list class="listCss" scrollbar="on" >
  4.     <list-item class="listItem"></list-item>
  5.     <list-item class="listItem"></list-item>
  6.     <list-item class="listItem"></list-item>
  7.     <list-item class="listItem"></list-item>
  8.     <list-item class="listItem"></list-item>
  9.     <list-item class="listItem"></list-item>
  10. </list>
  11. </div>
复制代码
  1. /* index.css */
  2. .container {
  3.   flex-direction: column;
  4.   background-color: #F1F3F5;
  5. }
  6. .listItem{
  7.   height: 20%;
  8.   background-color:#d2e0e0;
  9.   margin-top: 20px;
  10. }
  11. .listCss{
  12.   height: 100%;
  13.   scrollbar-color: #8e8b8b;
  14.   scrollbar-width: 50px;
  15. }
复制代码

1.3 -> 添加侧边索引栏

设置indexer属性为自界说索引时，索引栏会显示在列表右边界处，indexer属性设置为true,默以为字母索引表。
  1. <!-- index.hml -->
  2. <div class="container">   
  3.   <list class="listCss"  indexer="{
  4.   
  5.   {['#','1','2','3','4','5','6','7','8']}}" >  
  6.     <list-item class="listItem"  section="#" ></list-item>   
  7.   </list>
  8. </div>
复制代码
  1. /* index.css */
  2. .container{
  3.   flex-direction: column;
  4.   background-color: #F1F3F5;
  5. }
  6. .listCss{
  7.   height: 100%;   
  8.   flex-direction: column;
  9.   columns: 1
  10. }
复制代码

说明


  • indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。
  • indexer可以自界说索引表，自界说时"#"必须要存在。
1.4 -> 实现列表折叠和睁开

为List组件添加groupcollapse和groupexpand事故实现列表的折叠和睁开。
  1. <!-- index.hml -->
  2. <div class="doc-page">
  3.   <list style="width: 100%;" id="mylist">
  4.     <list-item-group for="listgroup in list" id="{
  5.   
  6.   {listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand">
  7.       <list-item type="item" style="background-color:#FFF0F5;height:95px;">
  8.         <div class="item-group-child">
  9.           <text>One---{
  10.   
  11.   {listgroup.value}}</text>
  12.         </div>
  13.       </list-item>
  14.       <list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true">
  15.         <div class="item-group-child">
  16.           <text>Primary---{
  17.   
  18.   {listgroup.value}}</text>
  19.         </div>
  20.       </list-item>
  21.     </list-item-group>
  22.   </list>
  23. </div>
复制代码
  1. /* index.css */
  2. .doc-page {
  3.   flex-direction: column;
  4.   background-color: #F1F3F5;
  5. }
  6. list-item{
  7. margin-top:30px;
  8. }
  9. .top-list-item {
  10.   width:100%;
  11.   background-color:#D4F2E7;
  12. }
  13. .item-group-child {
  14.   justify-content: center;
  15.   align-items: center;
  16.   width:100%;
  17. }
复制代码
  1. // test.js
  2. import prompt from '@system.prompt';
  3. export default {
  4.   data: {
  5.     direction: 'column',
  6.     list: []
  7.   },
  8.   onInit() {
  9.     this.list = []
  10.     this.listAdd = []
  11.     for (var i = 1; i <= 2; i++) {
  12.       var dataItem = {
  13.         value: 'GROUP' + i,
  14.       };
  15.         this.list.push(dataItem);
  16.     }
  17.   },
  18.   collapse(e) {
  19.     prompt.showToast({
  20.       message: 'Close ' + e.groupid
  21.     })
  22.   },
  23.   expand(e) {
  24.     prompt.showToast({
  25.     message: 'Open ' + e.groupid
  26.     })
  27.   }
  28. }
复制代码

说明


  • groupcollapse和groupexpand事故仅支持list-item-group组件使用。
1.5 -> 场景示例

在本场景中，可以根据字母索引表查找对应联系人。
  1. <!-- index.hml -->
  2. <div class="doc-page">
  3.   <text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;">
  4.       <span>Contacts</span>
  5.   </text>
  6.   <list class="list" indexer="true">
  7.     <list-item class="item" for="{
  8.   
  9.   {namelist}}" type="{
  10.   
  11.   {$item.section}}" section="{
  12.   
  13.   {$item.section}}">
  14.       <div class="container">
  15.         <div class="in-container">
  16.           <text class="name">{
  17.   
  18.   {$item.name}}</text>
  19.           <text class="number">18888888888</text>
  20.         </div>
  21.       </div>
  22.     </list-item>
  23.     <list-item type="end" class="item">
  24.       <div style="align-items:center;justify-content:center;width:750px;">
  25.         <text style="text-align: center;">Total: 10</text>
  26.       </div>
  27.     </list-item>
  28.   </list>
  29. </div>
复制代码
  1. /* index.css */
  2. .doc-page {
  3.   width: 100%;
  4.   height: 100%;
  5.   flex-direction: column;
  6.   background-color: #F1F3F5;
  7. }
  8. .list {
  9.   width: 100%;
  10.   height: 90%;
  11.   flex-grow: 1;
  12. }
  13. .item {
  14.   height: 120px;
  15.   padding-left: 10%;
  16.   border-top: 1px solid #dcdcdc;
  17. }
  18. .name {
  19.   color: #000000;
  20.   font-size: 39px;
  21. }
  22. .number {
  23.   color: black;
  24.   font-size: 25px;
  25. }
  26. .container {
  27.   flex-direction: row;
  28.   align-items: center;
  29. }
  30. .in-container {
  31.   flex-direction: column;
  32.   justify-content: space-around;
  33. }
复制代码
  1. // test.js
  2. export default {
  3.    data: {
  4.      namelist:[{
  5.        name: 'Zoey',
  6.        section:'Z'
  7.      },{
  8.        name: 'Quin',
  9.        section:'Q'
  10.      },{
  11.        name:'Sam',
  12.        section:'S'
  13.      },{
  14.        name:'Leo',
  15.        section:'L'
  16.      },{
  17.        name:'Zach',
  18.        section:'Z'
  19.      },{
  20.        name:'Wade',
  21.        section:'W'
  22.      },{
  23.        name:'Zoe',
  24.        section:'Z'
  25.      },{
  26.         name:'Warren',
  27.         section:'W'
  28.      },{
  29.         name:'Kyle',
  30.         section:'K'
  31.      },{
  32.        name:'Zaneta',
  33.        section:'Z'
  34.      }]
  35.    },
  36.    onInit() {
  37.    }
  38. }
复制代码

2 -> dialog

Dialog组件用于创建自界说弹窗，通常用来展示用户当前需要或用户必须关注的信息或操作。
2.1 -> 创建Dialog组件

在pages/index目录下的hml文件中创建一个Dialog组件，并添加Button组件来触发Dialog。Dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。
  1. <!-- test.hml -->
  2. <div class="doc-page">
  3.   <dialog class="dialogClass" id="dialogId" dragable="true">
  4.     <div class="content">
  5.       <text>this is a dialog</text>
  6.     </div>
  7.   </dialog>
  8.   <button value="click me" onclick="openDialog"></button>
  9. </div>
复制代码
  1. /* test.css */
  2. .doc-page {
  3.   width:100%;
  4.   height:100%;
  5.   flex-direction: column;
  6.   align-items: center;
  7.   justify-content: center;
  8.   background-color: #F1F3F5;
  9. }
  10. .dialogClass{
  11.   width: 80%;
  12.   height: 250px;
  13.   margin-start: 1%;
  14. }
  15. .content{
  16.   width: 100%;
  17.   height: 250px;
  18.   justify-content: center;
  19.   background-color: #e8ebec;
  20.   border-radius: 20px;
  21. }
  22. text{
  23.   width: 100%;
  24.   height: 100%;
  25.   text-align: center;
  26. }
  27. button{
  28.   width: 70%;
  29.   height: 60px;
  30. }
复制代码
  1. /* test.js */
  2. export default {
  3.   //Touch to open the dialog box.
  4.   openDialog(){
  5.     this.$element('dialogId').show()
  6.   },
  7. }
复制代码

2.2 -> 设置弹窗响应

点击页面上非Dialog的区域时，将触发cancel事故而关闭弹窗。同时也可以通过对Dialog添加show和close方法来显示和关闭弹窗。
  1. <!-- test.hml -->
  2. <div class="doc-page">
  3.   <dialog class="dialogClass" id="dialogId" oncancel="canceldialog">
  4.     <div class="dialogDiv">
  5.       <text>dialog</text>
  6.       <button value="confirm" onclick="confirmClick"></button>
  7.     </div>
  8.   </dialog>
  9.   <button value="click me" onclick="openDialog"></button>
  10. </div>
复制代码
  1. /* test.css */
  2. .doc-page {
  3.   width:100%;
  4.   height:100%;
  5.   flex-direction: column;
  6.   align-items: center;
  7.   justify-content: center;
  8.   background-color: #F1F3F5;
  9. }
  10. .dialogClass{
  11.   width: 80%;
  12.   height: 300px;
  13.   margin-start: 1%;
  14. }
  15. .dialogDiv{
  16.   width: 100%;
  17.   flex-direction: column;
  18.   justify-content: center;
  19.   align-self: center;
  20. }
  21. text{
  22.   height: 100px;
  23.   align-self: center;
  24. }
  25. button{
  26.   align-self: center;
  27.   margin-top: 20px;
  28.   width: 60%;
  29.   height: 80px;
  30. }
复制代码
  1. /* test.js */
  2. import prompt from '@system.prompt';
  3. export default {
  4.   canceldialog(e){
  5.     prompt.showToast({
  6.       message: 'dialogCancel'
  7.     })
  8.   },
  9.   openDialog(){
  10.     this.$element('dialogId').show()
  11.      prompt.showToast({
  12.       message: 'dialogShow'
  13.     })
  14.   },
  15.   confirmClick(e) {
  16.     this.$element('dialogId').close()
  17.     prompt.showToast({
  18.       message: 'dialogClose'
  19.     })
  20.   },
  21. }
复制代码

说明


  • 仅支持单个子组件。
  • Dialog属性、样式均不支持动态更新。
  • Dialog组件不支持focusable、click-effect属性。
2.3 -> 场景示例

在本场景中，可以通过Dialog组件实现一个日程表。弹窗在打开状态下，利用Textarea组件输入当前日程，点击确认按钮后获取当前时间并生存输入文本。最后以列表形式将各日程进行展示。
  1. <!-- test.hml -->
  2. <div class="doc-page">
  3.   <text style="margin-top: 60px;margin-left: 30px;">
  4.     <span>{
  5.   
  6.   {date}} events</span>
  7.   </text>
  8.   <div class="btndiv">
  9.     <button type="circle" class="btn" onclick="addschedule">+</button>
  10.   </div>
  11. <!--  for Render events data  -->
  12.   <list style="width: 100%;">
  13.     <list-item type="item" for="schedulelist" style="width:100%;height: 200px;">
  14.       <div class="schedulediv">
  15.         <text class="text1">{
  16.   
  17.   {date}}  event</text>
  18.         <text class="text2">{
  19.   
  20.   {$item.schedule}}</text>
  21.       </div>
  22.     </list-item>
  23.   </list>
  24.   <dialog id="datedialog" oncancel="canceldialog" >
  25.     <div class="dialogdiv">
  26.       <div class="innertxt">
  27.         <text class="text3">{
  28.   
  29.   {date}}</text>
  30.         <text class="text4">New event</text>
  31.       </div>
  32.       <textarea placeholder="Event information" onchange="getschedule" class="area" extend="true"></textarea>
  33.       <div class="innerbtn">
  34.         <button type="text" value="Cancel" onclick="cancelschedule" class="btntxt"></button>
  35.         <button type="text" value="OK" onclick="setschedule" class="btntxt"></button>
  36.       </div>
  37.     </div>
  38.   </dialog>
  39. </div>
复制代码
  1. /* test.css */
  2. .doc-page {
  3.   flex-direction: column;
  4.   background-color: #F1F3F5;
  5. }
  6. .btndiv {
  7.   width: 100%;
  8.   height: 200px;
  9.   flex-direction: column;
  10.   align-items: center;
  11.   justify-content: center;
  12. }
  13. .btn {
  14.   radius:60px;
  15.   font-size: 100px;
  16.   background-color: #1E90FF;
  17. }
  18. .schedulediv {
  19.   width: 100%;
  20.   height: 200px;
  21.   flex-direction: column;
  22.   justify-content: space-around;
  23.   padding-left: 55px;
  24. }
  25. .text1 {
  26.   color: #000000;
  27.   font-weight: bold;
  28.   font-size: 39px;
  29. }
  30. .text2 {
  31.   color: #a9a9a9;
  32.   font-size: 30px;
  33. }
  34. .dialogdiv {
  35.   flex-direction: column;
  36.   align-items: center;
  37. }
  38. .innertxt {
  39.   width: 320px;
  40.   height: 160px;
  41.   flex-direction: column;
  42.   align-items: center;
  43.   justify-content: space-around;
  44. }
  45. .text3 {
  46.   font-family: serif;
  47.   color: #1E90FF;
  48.   font-size: 38px;
  49. }
  50. .text4 {
  51.   color: #a9a9a9;
  52.   font-size: 33px;
  53. }
  54. .area {
  55.   width: 320px;
  56.   border-bottom: 1px solid #1E90FF;
  57. }
  58. .innerbtn {
  59.   width: 320px;
  60.   height: 120px;
  61.   justify-content: space-around;
  62. }
  63. .btntxt {
  64.   text-color: #1E90FF;
  65. }
复制代码
  1. /* test.js */
  2. var info = null;
  3. import prompt from '@system.prompt';
  4. import router from '@system.router';
  5. export default {
  6.   data: {
  7.     curYear:'',
  8.     curMonth:'',
  9.     curDay:'',
  10.     date:'',
  11.     schedule:'',
  12.     schedulelist:[]
  13.   },
  14.   onInit() {
  15.     // Obtain the current date.
  16.     var date = new Date();
  17.     this.curYear = date.getFullYear();
  18.     this.curMonth = date.getMonth() + 1;
  19.     this.curDay = date.getDate();
  20.     this.date = this.curYear + '-' + this.curMonth + '-' + this.curDay;
  21.     this.schedulelist = []
  22.   },
  23.   addschedule(e) {
  24.     this.$element('datedialog').show()
  25.   },
  26.   canceldialog(e) {
  27.     prompt.showToast({
  28.       message: 'Event setting canceled.'
  29.     })
  30.   },
  31.   getschedule(e) {
  32.     info = e.value
  33.   },
  34.   cancelschedule(e) {
  35.     this.$element('datedialog').close()
  36.     prompt.showToast({
  37.       message: 'Event setting canceled.'
  38.     })
  39.   },
  40. //    Touch OK to save the data.
  41.   setschedule(e) {
  42.     if (e.text === '') {
  43.       this.schedule = info
  44.     } else {
  45.       this.schedule = info
  46.       var addItem =  {schedule: this.schedule,}
  47.       this.schedulelist.push(addItem)
  48.     }
  49.     this.$element('datedialog').close()
  50.   }
  51. }
复制代码

3 -> form

Form是一个表单容器，支持容器内Input组件内容的提交和重置。
说明
从API Version 6开始支持。
3.1 -> 创建Form组件

在pages/index目录下的hml文件中创建一个Form组件。
  1. <!-- test.hml -->
  2. <div class="container">
  3.   <form style="width: 100%; height: 20%">  
  4.     <input type="text" style="width:80%"></input>
  5.   </form>
  6. </div>
复制代码
  1. /* test.css */
  2. .container {
  3.   width:100%;
  4.   height:100%;
  5.   flex-direction: column;
  6.   justify-content: center;
  7.   align-items: center;
  8.   background-color: #F1F3F5;
  9. }
复制代码

3.2 -> 实现表单缩放

为Form组件添加click-effect属性，实现点击表单后的缩放效果。
  1. <!-- test.hml -->
  2. <div class="container">
  3.   <form  id="formId" class="formClass" click-effect="spring-large">
  4.     <input type="text"></input>  
  5.   </form>
  6. </div>
复制代码
3.3 -> 设置Form样式

通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。
  1. /* test.css */
  2. .container {
  3.   width: 100%;
  4.   height: 100%;
  5.   flex-direction: column;
  6.   align-items: center;
  7.   justify-content: center;
  8.   background-color: #F1F3F5;
  9. }
  10. .formClass{
  11.   width: 80%;
  12.   height: 100px;
  13.   padding: 10px;
  14.   border: 1px solid #cccccc;
  15. }
复制代码

3.4 -> 添加响应事故

为Form组件添加submit和reset事故，来提交表单内容或重置表单选项。
  1. <!-- test.hml -->
  2. <div class="container">
  3.   <form onsubmit='onSubmit' onreset='onReset' class="form">
  4.     <div style="width: 100%;justify-content: center;">
  5.       <label>Option 1</label>
  6.       <input type='radio' name='radioGroup' value='radio1'></input>
  7.       <label>Option 2</label>
  8.       <input type='radio' name='radioGroup' value='radio2'></input>
  9.     </div>
  10.     <div style="width: 100%;justify-content: center; margin-top: 20px">
  11.       <input type="submit" value="Submit" style="width:120px; margin-right:20px;" >   
  12.       </input>
  13.       <input type="reset" value="Reset" style="width:120px;"></input>
  14.     </div>
  15.   </form>
  16. </div>
复制代码
  1. /* index.css */
  2. .container{
  3.   width: 100%;
  4.   height: 100%;
  5.   flex-direction: column;
  6.   justify-items: center;
  7.   align-items: center;
  8.   background-color: #F1F3F5;
  9. }
  10. .form{
  11.   width: 100%;
  12.   height: 30%;
  13.   margin-top: 40%;
  14.   flex-direction: column;
  15.   justify-items: center;
  16.   align-items: center;
  17. }
复制代码
  1. /* test.js */
  2. import prompt from '@system.prompt';
  3. export default{
  4.   onSubmit(result) {
  5.     prompt.showToast({
  6.       message: result.value.radioGroup
  7.     })
  8.   },
  9.   onReset() {
  10.     prompt.showToast({
  11.       message: 'Reset All'
  12.     })
  13.   }
  14. }
复制代码

3.5 -> 场景示例

在本场景中，可以选择相应选项并提交或重置数据。
创建Input组件，分别设置type属性为checkbox(多选框)和radio(单选框)，再使用Form组件的onsubmit和onreset事故实现表单数据的提交与重置。
  1. <!-- test.hml -->
  2. <div class="container">
  3.    <form onsubmit="formSubmit" onreset="formReset">
  4. <text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
  5.       <span > Form </span>
  6.   </text>
  7.     <div style="flex-direction: column;width: 90%;padding: 30px 0px;">
  8.      <text class="txt">Select 1 or more options</text>
  9.       <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
  10.         <label target="checkbox1">Option 1</label>
  11.         <input id="checkbox1" type="checkbox" name="checkbox1"></input>
  12.         <label target="checkbox2">Option 2</label>
  13.         <input id="checkbox2" type="checkbox" name="checkbox2"></input>
  14.        </div>
  15.        <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
  16.        <text class="txt">Select 1 option</text>
  17.        <div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
  18.          <label target="radio1">Option 1</label>
  19.          <input id="radio1" type="radio" name="myradio"></input>
  20.          <label target="radio2">Option 2</label>
  21.          <input id="radio2" type="radio" name="myradio"></input>
  22.        </div>
  23.        <divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
  24.        <text class="txt">Text box</text>
  25.        <input type="text" placeholder="Enter content." style="margin-top: 50px;"></input>
  26.        <div style="width: 90%;align-items: center;justify-content: space-between;margin: 40px;">
  27.          <input type="submit">Submit</input>
  28.          <input type="reset">Reset</input>
  29.        </div>
  30.     </div>
  31.   </form>
  32. </div>
复制代码
  1. /* index.css */
  2. .container {
  3.   width: 100%;
  4.   height: 100%;
  5.   flex-direction:column;
  6.   align-items:center;
  7.   background-color:#F1F3F5;
  8. }
  9. .txt {
  10.   font-size:33px;
  11.   font-weight:bold;
  12.   color:darkgray;
  13. }
  14. label{
  15.   font-size: 20px;
  16. }
复制代码
  1. /* test.js */
  2. import prompt from '@system.prompt';
  3. export default {
  4.   formSubmit() {
  5.     prompt.showToast({
  6.       message: 'Submitted.'
  7.     })
  8.   },
  9.   formReset() {
  10.     prompt.showToast({
  11.       message: 'Reset.'
  12.     })
  13.   }
  14. }
复制代码



感谢各位大佬支持！！！

互三啦！！！




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

守听

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表