鸿蒙harmonyOS常用底子标签、组件、事件等用法介绍
底子组件[*]text ： 字体标签，汉字显示必须用字体组件包裹，规范规定，不写不显示
[*]image：图片标签，属性：src，路径相对路径…/方式
[*]button：按钮标签，属性：icon图标的路径，按钮带图标
[*]rating：评分组件，星星显示属性：numstars默认分值的最大值设置(eg: 10)，rating设置高亮显示（eg:3.5）
[*]progress：进度条，属性：type horizontal默认线型性 scale-ring带刻度的圆环 arc圆弧；percent进度值高亮部分，secondarypercent进度条最大值设置
[*]search：搜索组件，属性：searchbutton: 搜索点击按钮名称设置，hint：搜索框提示语
[*]slider：滑动组件，属性：showtips滑动上方提示进度气泡，step按多少步长滑动；value默认高亮滑动停顿值
[*]list：下拉列表，和list-item-group > list-item搭配使用；属性：scrolleffect收起特效（fade、spring）；divider属性
[*]list-item-group：列表组件分组标签，和list-item搭配使用
[*]list-item：列表组件，可单独使用，属性：primary="true"和list搭配使用时分组选中显示的值，不指定默认显示第一个。
[*]badge：消息数组件，汉字右上方消息数的组件，属性：visible是否显示；count有多少条（未读）消息数；maxcount最大显示值，超过这个值显示+（99+）。
[*]swiper：swiper轮播组件，属性：autoplay是否自动轮播；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是否横竖向，默认横向，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-colspan="0">
<text>首 页</text>
</grid-col>
<grid-colspan="0">
<text>选车页</text>
</grid-col>
<grid-colspan="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 索引； idx索引； idx索引；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>
<textfor="{{ (i,ele) in carList}}">{{i}}.{{ele.id}}{{ele.name}}{{ele.value}}元</text>
[*]if、elif、else和show 同vue使用原理同等
[*]grap:+事件名；on+事件名（grap:click、on:click）
harmonyOS配景介绍及了解请进入https://blog.csdn.net/weixin_42498482/article/details/136698074
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]