当前位置:网站首页>HarmonyOS.2
HarmonyOS.2
2022-06-24 12:58:00 【辞浔】
(1).自定义组件的创建
- 定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css,需要注意的是:3个文件的文件名必须保持一致,不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
- 设置底部选项卡对应的 json 数据源,用来保存 icon 图片、标题,以及点击选中后的 icon 图片。

- 使用 toolbar + toolbar-item 内置组件构建底部 tabbar 选项卡服务「tabbar.hml」
- 导入 tabbarItem 数据,并设置对应 data ,同时设置点击事件 动态设置点击对应 icon 选中。
- 设置 CSS 样式 将 tabbar 选项卡置底「tabbar.css」
(2)自定义组件的调用
name 属性指自定义组件名称(非必填),组件名称对大小写不敏感,默认使用小写,src 属性指自定义组件hml 文件路径(必填),若没有设置 name 属性,则默认使用 hml 文件名作为组件名。
事件绑定:自定义组件中绑定子组件事件使用 (on|@)child1 语法,子组件中通过 this.$emit('child1', { params: '传递参数' }) 触发事件并进行传值,父组件执行 bindParentVmMethod 方法并接收子组件传递的参数。
(3)父组件通过slot向子组件发布内容
1.普通slot插槽分发内容
2.具名插槽分发内容
(3)路由功能的实现
页面的定义:
在 Pages 文件夹下面新建一个文件夹代表需要的路由,当然,我们也可以新建一个 Ablity 体验,这里演示 Pages.Name。
在 新建的文件夹下面务必需要注意新建三个文件
index.hml、index.js、index.css三个文件,该文件名必须使用 index 来进行命名,使用其他命名会造成文件依赖无法找到。快捷方式,可以选择到对应的 Ability Pages 文件夹下面,然后 new page 直接添加页面,并会自动注册好路由,这是比较方便的
在 config.json 文件中

路由的使用:
1.导入路由模块
2.router.push(OBJECT),跳转到应用内的指定页面。
3.router.replace(OBJECT),用应用内的某个页面替换当前页面,并销毁被替换的页面。
4.router.back(OBJECT),返回上一页面或指定的页面。
5.router.clear(),清空页面栈中的所有历史页面,仅保留当前页面作为栈顶页面。
6.router.getLength(),获取当前在页面栈内的页面数量。
7.router.getState(),获取当前页面的状态信息。
边栏推荐
- Goldfish rhca memoirs: do447 managing projects and conducting operations -- creating a project for ansible scripts
- 杰理之开了多种解码格式插卡到播放等待的时间长【篇】
- Redis面试题
- Resolve symbol conflicts for dynamic libraries
- Why is open source technology so popular in the development of audio and video streaming media platform?
- Cloud native essay solicitation progress case practice
- 一键生成大学、专业甚至录取概率,AI填报志愿卡这么神奇?
- Android kotlin Encyclopedia
- Integrate the authorization interface code of intra city distribution account of multiple express companies nationwide - Express 100
- Daily question 8-515 Find the maximum value in each tree row
猜你喜欢

常识知识点

每日一题day8-515. 在每个树行中找最大值

Without home assistant, zhiting can also open source access homekit and green rice devices?

CVPR 2022 | 美团技术团队精选论文解读

居家办公更要高效-自动化办公完美提升摸鱼时间 | 社区征文

龙蜥开发者说:首次触电,原来你是这样的龙蜥社区? | 第 8 期

In the era of knowledge economy, it will teach you to do well in knowledge management

吉时利静电计宽测量范围

如何在物联网低代码平台中进行任务管理?

Activity lifecycle
随机推荐
首席信息安全官仍然会犯的漏洞管理错误
2022煤矿瓦斯抽采操作证考试题及模拟考试
Integrated API interface code of domestic express companies for intra city distribution and ordering - Express 100
Hands on data analysis unit 3 model building and evaluation
如何化解35岁危机?华为云数据库首席架构师20年技术经验分享
居家办公更要高效-自动化办公完美提升摸鱼时间 | 社区征文
Yyds dry goods counting solution sword finger offer: adjust the array order so that odd numbers precede even numbers (2)
2022年施工升降机司机(建筑特殊工种)考试试题及在线模拟考试
MySQL interview questions
[one picture series] one picture to understand Tencent Qianfan apaas
kotlin 语言特性
2022年烟花爆竹生产单位安全生产管理人员考试题模拟考试题库模拟考试平台操作
Kotlin keyword extension function
群晖向阿里云OSS同步
项目经理的晋级之路
kotlin 接口 泛型 协变 逆变
Express 100 Express query interface (API) interface specification document - detailed version
CVPR 2022 | 美团技术团队精选论文解读
【5G NR】5G NR系统架构
快手实时数仓保障体系研发实践