鸿蒙harmonyOS常用基础标签、组件、事件等用法介绍

基础组件

text ：字体标签，汉字显示必须用字体组件包裹，规范规定，不写不显示
image：图片标签，属性：src，路径相对路径…/方式
button：按钮标签，属性：icon图标的路径，按钮带图标
rating：评分组件，星星显示属性：numstars[number]默认分值的最大值设置(eg: 10)，rating[number]设置高亮显示（eg:3.5）
progress：进度条，属性：type[string] horizontal默认线型性 scale-ring带刻度的圆环 arc圆弧；percent进度值高亮部分，secondarypercent[number]进度条最大值设置
search：搜索组件，属性：searchbutton[string]: 搜索点击按钮名称设置，hint[string]：搜索框提示语
slider：滑动组件，属性：showtips[boolean]滑动上方提示进度气泡，step[number]按多少步长滑动；value默认高亮滑动停留值
list：下拉列表，和list-item-group > list-item搭配使用；属性：scrolleffect[string]收起特效（fade、spring）；divider[boolean]属性
list-item-group：列表组件分组标签，和list-item搭配使用
list-item：列表组件，可单独使用，属性：primary="true"和list搭配使用时分组选中显示的值，不指定默认显示第一个。
badge：消息数组件，汉字右上方消息数的组件，属性：visible[boolean]是否显示；count[number]有多少条（未读）消息数；maxcount[number]最大显示值，超过这个值显示+（99+）。
swiper：swiper轮播组件，属性：autoplay[boolean]是否自动轮播；scrolleffect轮播效果。

<swiper autoplay="true" indicatordisabled="true"scrolleffect="spring" digital="false"><image src="/common/swiper1.jpg"></image><image src="/common/swiper2.jpg"></image><image src="/common/swiper3.jpg"></image></swiper>

toolbar：工具组件，底部工具组件，等于五个只显示5个，大于5个显示4个，其它折叠收起；搭配标签toolbar-item（）
tabs：tab切换列表组件；属性：vertical[boolean]是否横竖向，默认横向，true竖向tab点击选中有问题，但是功能正常

<tabs vertical="true"><tab-bar class="nav-box"><text>蔬菜区</text><text>肉类区</text></tab-bar><tab-content><div class="con-box"><div class="box"><image src="/common/goods/1.png"></image><text>今日最新菜谱凉拌黄瓜</text><button icon="/common/cart.png">购买</button></div><div class="box"><image src="/common/goods/1.png"></image><text>今日最新菜谱凉拌黄瓜</text><button icon="/common/cart.png">购买</button></div></tab-content></tabs>

grid-container：弹性盒子布局；于grid-row>grid-col搭配使用
grid-row：一行
grid-col：一列； span="0"别问为什么，加上后通过css改变宽度

<grid-container style="margin: 0;"><grid-row class="top"><grid-col  span="0"><text>首    页</text></grid-col><grid-col  span="0"><text>选车页</text></grid-col><grid-col  span="0"><text>车系点评</text></grid-col></grid-row></grid-container>

以上是一行3列布局

stepper：步骤标签；和stepper-item搭配使用

<stepper><stepper-item><text>第一步: 请填写车辆基本信息</text><input placeholder="请输入车系名称"></input><input placeholder="请输入车型价格" type="number"></input></stepper-item>
<!--        label接受对象信息,用来设置步骤文本--><stepper-item label="{{ labelConf }}"><text>第二步: 请填写车辆销售信息</text><input placeholder="请输入预售额数" type="number"></input><input placeholder="请输入预售额最大数" type="number"></input></stepper-item><stepper-item label="{{ labelConf }}"><text>第三步: 请填写商品销售信息</text><div class="lastStep"><input type="checkbox" checked="true"></input><text>奥迪</text><input type="checkbox"></input><text>宝马</text><input type="checkbox"></input><text>大奔</text></div></stepper-item></stepper>

注意以上是三个步骤页面，带返回和下一页功能的步骤页面

for属性：for循环，不支持对象遍历，只支持数组，属性： $i d x 索引；$ item遍历子元素；tid唯一（标识）key值

<div for="{{classList}}" tid="{{ $idx }}"><text>{{$idx}}{{$item}}</text></div>
<div for="{{ (i,ele) in carList}}"><text>{{i}}.{{ele.id}}  {{ele.name}}  {{ele.value}}元</text></div><text  for="{{ (i,ele) in carList}}">{{i}}.{{ele.id}}  {{ele.name}}  {{ele.value}}元</text>