当前位置:网站首页>【快应用】实现自定义导航栏组件
【快应用】实现自定义导航栏组件
2022-08-10 17:45:00 【华为开发者论坛】
快应用实现自定义导航栏组件。
1. 简介
导航栏组件,主要用于头部导航。
导航栏(Nav_bar)组件结构大致分为两部分,一部分是图标,另一部分是文本,子组件实现,父组件引用。
效果图如下:
基本布局代码如下:
<template> <div class="container"> <text>本导航栏为自定义组件,并非原生导航栏。除非原生导航栏无法满足需求,否则不推荐使用自定义导航栏组件。</text> <text class="section">基本用法</text> <div class="example-body"> <nav_bar height="50px" backgroundcolor="#ffffff" left-icon="{{leftIcon}}" title="标题" @clickleft="back" title-style="font-size: 40px; color:red"></nav_bar></div></div><template>
2.开发指引
2.1自定义子组件
1.定义布局样式。
导航栏组件布局包括三个部分:左侧图标内容部分、标题内容部分、右侧图标内容部分。
左侧图标内容部分、右侧图标内容部分通过image+text+slot组件实现
标题内容部分由text+slot组件实现。
代码如下:
<template> <div> <div class="navbar_content" style="height:{{height}};background-color:{{backgroundcolor}}"> <div class="navbar_btns_left" onclick="clickLeft"> <div if="leftIcon.length"> <image style="height: 50px" src="{{leftIcon}}"></image> </div> <div if="leftText.length"> <text style="{{leftTextStyle}}">{{ leftText }}</text> </div> <slot name="left"></slot> </div> <div class="navbar_container" onclick="clickTitle"> <text class="text_context" style="{{titleStyle}}" if="title.length">{{ title }}</text> <slot name="mid"></slot> </div> <div class="navbar_btns_right" onclick="clickRight"> <div if="rightIcon.length"> <image style="height: 50px" src="{{rightIcon}}"></image> </div> <div class="*" if="rightText.length && !rightIcon.length"> <text style="{{rightTextStyle}}">{{ rightText }}</text> </div> <slot name="right"></slot> </div> </div> </div></template>
2.2子组件设计
支持的属性如下:
属性名 | 类型 | 默认值 | 说明 |
title | String | null | 标题文字 |
height | String | null | 导航栏高度 |
backgroundcolor | String | null | 导航栏背景色 |
leftText | String | null | 左侧按钮文本 |
rightText | String | null | 右侧按钮文本 |
leftIcon | String | null | 左侧按钮图标 |
rightIcon | String | null | 右侧按钮图标 |
支持的事件:
事件名称 | 说明 | 返回值 |
clickLeft | 无 | 点击当前点击状态 |
clickRight | 无 | 点击当前点击状态 |
clickTitle | 无 | 点击当前点击状态 |
2.3父子组件通信
2.3.1父组件给子组件传递数据
子组件通过在props定义参数,接收来自父组件的传值数据,如height、title等。如下图所示:
2.3.2子组件通过this.$emit方法触发父组件的自定义事件
3.总结
实现导航栏组件,您可以从中学会如下知识点:
l 熟悉快应用子组件的设计和属性定义;
l 熟悉父子组件通信;
l 熟悉slot组件的运用;
想欲了解更多详情,请参见:
华为快应用官网:
最后附上完整的实现代码:
导航栏组件nav_bar.ux
<template> <div> <div class="navbar_content" style="height:{{height}};background-color:{{backgroundcolor}}"> <div class="navbar_btns_left" onclick="clickLeft"> <div if="leftIcon.length"> <image style="height: 50px" src="{{leftIcon}}"></image> </div> <div if="leftText.length"> <text style="{{leftTextStyle}}">{{ leftText }}</text> </div> <slot name="left"></slot> </div> <div class="navbar_container" onclick="clickTitle"> <text class="text_context" style="{{titleStyle}}" if="title.length">{{ title }}</text> <slot name="mid"></slot> </div> <div class="navbar_btns_right" onclick="clickRight"> <div if="rightIcon.length"> <image style="height: 50px" src="{{rightIcon}}"></image> </div> <div class="*" if="rightText.length && !rightIcon.length"> <text style="{{rightTextStyle}}">{{ rightText }}</text> </div> <slot name="right"></slot> </div> </div> </div></template><script> /** * NavBar 自定义导航栏 * @description 导航栏组件,主要用于头部导航 * @tutorial https://ext.dcloud.net.cn/plugin?id=52 * @property {String} title 标题文字 * @property {String} height 导航栏高度 * @property {String} backgroundcolor 导航栏背景色 * @property {String} leftText 左侧按钮文本 * @property {String} rightText 右侧按钮文本 * @property {String} leftIcon 左侧按钮图标 * @property {String} rightIcon 右侧按钮图标 * @property {String} leftTextStyle 左侧按钮文本样式 * @property {String} titleStyle 中间标题文本样式 * @property {String} rightTextStyle 右侧按钮文本样式 * @event {Function} clickLeft 左侧按钮点击时触发 * @event {Function} clickRight 右侧按钮点击时触发 * @event {Function} clickTitle 中间标题点击时触发 */ module.exports = { props: { height: { type: String, default: "" }, backgroundcolor: { type: String, default: "" }, title: { type: String, default: "" }, leftText: { type: String, default: "" }, rightText: { type: String, default: "" }, leftIcon: { type: String, default: "" }, rightIcon: { type: String, default: "" }, leftTextStyle: { type: String, default: '' }, titleStyle: { type: String, default: '' }, rightTextStyle: { type: String, default: '' }, }, onInit() { this.$page.setTitleBar({ text: '自定义导航栏' }) }, clickLeft() { this.$emit("clickleft"); }, clickRight() { this.$emit("clickright"); }, clickTitle() { this.$emit("clicktitle"); } }</script> <style> .navbar_content { display: flex; align-items: center; flex-direction: row; } .navbar_btns_left { width: 150px; } .navbar_container { width: 500px; } .text_context { width: 480px; text-align: center; } .navbar_btns_right { width: 150px; justify-content: flex-end; }</style>
主页面hello.ux
<import name="nav_bar" src="./Nav_bar/nav_bar.ux"></import><template> <div class="container"> <text>本导航栏为自定义组件,并非原生导航栏。除非原生导航栏无法满足需求,否则不推荐使用自定义导航栏组件。</text> <text class="section">基本用法</text> <div class="example-body"> <nav_bar height="50px" backgroundcolor="#ffffff" left-icon="{{leftIcon}}" title="标题" @clickleft="back" title-style="font-size: 40px; color:red"></nav_bar> </div> <text class="section">左右显示文字</text> <div class="example-body"> <nav_bar left-icon="{{leftIcon}}" left-text="返回" title="标题" left-text-style="font-size: 30px; color:red;" right-text="菜单" @clickleft="back" @clickTitle="showTitle"></nav_bar> </div> <text class="section">插入slot</text> <div class="example-body"> <nav_bar right-icon="{{rightIcon}}" @clickleft="showCity" @clickright="scan"> <div slot="left"> <div> <text>北京</text> <image src="../Common/arrowdown.png"></image> </div> </div> <div slot="mid"> <div class="input-view"> <image style="height: 40px; margin-top: 15px" src="../Common/search.png"></image> <input enterkeytype="search" placeholder="输入搜索关键词" @enterkeyclick="confirm" /> </div> </div> </nav_bar> </div> </div></template> <script> import router from '@system.router' import prompt from '@system.prompt' export default { data() { return { city: "BeiJing", leftIcon: "../Common/leftIcon.png", rightIcon: "../Common/rightIcon.png" } }, back() { router.back() }, scan() { prompt.showToast({ message: '扫码', duration: "100000", gravity: 'center' }) }, showCity() { prompt.showToast({ message: '选择城市', duration: "100000", gravity: 'center' }) }, showTitle() { prompt.showToast({ message: '标题', duration: "100000", gravity: 'center' }) }, confirm() { prompt.showToast({ message: '搜索', duration: "100000", gravity: 'center' }) } }</script> <style> .container { flex: 1; flex-direction: column; background-color: #ffffff; } .section { background-color: #afeeee; margin-top: 20px; margin-bottom: 20px; font-size: 30px; padding: 20px; width: 100%; } .example-body { flex-direction: row; padding: 10px; background-color: #ffffff; width: 100%; } .input-view { flex-direction: row; background-color: #f8f8f8; height: 60px; border-radius: 15px; margin-left: 60px; margin-right: 60px; line-height: 30px; }</style>
欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
边栏推荐
- 华为云连续5年保持中国政务云基础设施市场份额第一…
- requires ‘angle‘ attribute to be a multiple of 45
- R语言使用oneway.test函数执行单因素方差分析(One-Way ANOVA)、使用数据集的子集数据进行单因素方差分析(subset函数筛选数据子集)
- 【接入指南 之 直接接入】手把手教你快速上手接入HONOR Connect平台(下)
- Toronto Research Chemicals 对乙酰氧基苯乙酮说明书
- 不止跑路,拯救误操作rm -rf /*的小伙儿
- 去除富文本标签样式
- DASCTF2022.07 empowerment competition WEB topic recurrence
- 本周四晚19:00知识赋能第六期第5课丨OpenHarmony WiFi子系统
- WebRTC source code analysis nack detailed explanation
猜你喜欢
Flexsim 发生器和暂存区设定临时实体流颜色和端口
Making Pre-trained Language Models Better Few-Shot Learners
Go 语言快速入门指南:第四篇 与数据为舞之数组
Before opening a futures account, you must confirm the handling fee as soon as possible
电路板ROHS测试报告怎么办理?电路板ROHS检测流程
「软件架构」10种常见的软件架构模式
Xilinx FPGA收发器参考时钟设计应用
Toronto Research Chemicals 对乙酰氧基苯乙酮说明书
欧洲核子研究中心首次在量子机器学习研究中取得实效
Toronto Research Chemicals BTK甜味剂配方丨D-Abequose
随机推荐
【接入指南 之 直接接入】手把手教你快速上手接入HONOR Connect平台(中)
产品说明丨Android端使用MobPush快速集成方法
华为云连续5年保持中国政务云基础设施市场份额第一…
FlexSim仿真软件入门笔记:基本操作、快捷键
1001 A+B Format (string processing)
想玩转监控神器Prometheus吗?
初始网络原理
忍不住 - 发个新帖子【为什么把红圈的功能入口隐藏?需要移动到鼠标到位置驻停才显示?】- 请投票
MySQL数据高级查询之连接查询、联合查询、子查询[通俗易懂]
Go 语言快速入门指南:第四篇 与数据为舞之数组
Toronto Research Chemicals霉菌毒素分析丨T2 四醇
不能直接在交易所期货开户
五菱宏光MINI EV,唯一的缺点就是安全性
「软件架构」10种常见的软件架构模式
c语言进阶篇:柔性数组
测试接口出现“data“: “Full authentication is required to access this resource“凭证已过期
机器人控制器编程实践指导书旧版-实践三 直流电机(执行器)
FFmpeg Huaping solution (modify source code, discard incomplete frames)
【数据存储精讲】整型和浮点型有什么区别?为什么会精度丢失?
施工企业数字化转型解决方案设计思路