• 【快应用】实现自定义导航栏组件

     快应用实现自定义导航栏组件。

    1. 简介

    导航栏组件，主要用于头部导航。

    导航栏（Nav_bar）组件结构大致分为两部分，一部分是图标，另一部分是文本，子组件实现，父组件引用。

    效果图如下：

    cke_710.png

    基本布局代码如下：

    1. <template>
    2.  
    3.   <div class="container">
    4.  
    5.     <text>本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。text>
    6.  
    7.     <text class="section">基本用法text>
    8.  
    9.     <div class="example-body">
    10.  
    11.       <nav_bar height="50px" backgroundcolor="#ffffff" left-icon="{{leftIcon}}" title="标题" 
    12.  
    13.           @clickleft="back" title-style="font-size: 40px; color:red">nav_bar>
    14.  
    15. div>
    16.  
    17. div>
    18.  
    19. <template>

    2.开发指引

    2.1自定义子组件

    1.定义布局样式。

    导航栏组件布局包括三个部分：左侧图标内容部分、标题内容部分、右侧图标内容部分。

    左侧图标内容部分、右侧图标内容部分通过image+text+slot组件实现

    标题内容部分由text+slot组件实现。

    代码如下：

    1. <template>
    2.  
    3.   <div>
    4.  
    5.     <div class="navbar_content" style="height:{{height}};background-color:{{backgroundcolor}}">
    6.  
    7.       <div class="navbar_btns_left" onclick="clickLeft">
    8.  
    9.         <div if="leftIcon.length">
    10.  
    11.           <image style="height: 50px" src="{{leftIcon}}">image>
    12.  
    13.         div>
    14.  
    15.         <div if="leftText.length">
    16.  
    17.           <text style="{{leftTextStyle}}">{{ leftText }}text>
    18.  
    19.         div>
    20.  
    21.         <slot name="left">slot>
    22.  
    23.       div>
    24.  
    25.       <div class="navbar_container" onclick="clickTitle">
    26.  
    27.         <text class="text_context" style="{{titleStyle}}" 
    28.  
    29.             if="title.length">{{ title }}text>
    30.  
    31.         <slot name="mid">slot>
    32.  
    33.       div>
    34.  
    35.       <div class="navbar_btns_right" onclick="clickRight">
    36.  
    37.         <div if="rightIcon.length">
    38.  
    39.           <image style="height: 50px" src="{{rightIcon}}">image>
    40.  
    41.         div>
    42.  
    43.         <div class="*" if="rightText.length && !rightIcon.length">
    44.  
    45.           <text style="{{rightTextStyle}}">{{ rightText }}text>
    46.  
    47.         div>
    48.  
    49.         <slot name="right">slot>
    50.  
    51.       div>
    52.  
    53.     div>
    54.  
    55.   div>
    56.  
    57. 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等。如下图所示：

      cke_16452.png 

    cke_21738.png

    cke_27159.png

    2.3.2子组件通过this.$emit方法触发父组件的自定义事件

    cke_33780.png

    3.总结

    实现导航栏组件，您可以从中学会如下知识点：

    l  熟悉快应用子组件的设计和属性定义；

    l  熟悉父子组件通信；

    l  熟悉slot组件的运用；

      

    想欲了解更多详情，请参见：

    华为快应用官网：

    文档中心

    最后附上完整的实现代码：

    导航栏组件nav_bar.ux

    1. <template>
    2.  
    3.   <div>
    4.  
    5.     <div class="navbar_content" style="height:{{height}};background-color:{{backgroundcolor}}">
    6.  
    7.       <div class="navbar_btns_left" onclick="clickLeft">
    8.  
    9.         <div if="leftIcon.length">
    10.  
    11.           <image style="height: 50px" src="{{leftIcon}}">image>
    12.  
    13.         div>
    14.  
    15.         <div if="leftText.length">
    16.  
    17.           <text style="{{leftTextStyle}}">{{ leftText }}text>
    18.  
    19.         div>
    20.  
    21.         <slot name="left">slot>
    22.  
    23.       div>
    24.  
    25.       <div class="navbar_container" onclick="clickTitle">
    26.  
    27.         <text class="text_context" style="{{titleStyle}}" 
    28.  
    29.             if="title.length">{{ title }}text>
    30.  
    31.         <slot name="mid">slot>
    32.  
    33.       div>
    34.  
    35.       <div class="navbar_btns_right" onclick="clickRight">
    36.  
    37.         <div if="rightIcon.length">
    38.  
    39.           <image style="height: 50px" src="{{rightIcon}}">image>
    40.  
    41.         div>
    42.  
    43.         <div class="*" if="rightText.length && !rightIcon.length">
    44.  
    45.           <text style="{{rightTextStyle}}">{{ rightText }}text>
    46.  
    47.         div>
    48.  
    49.         <slot name="right">slot>
    50.  
    51.       div>
    52.  
    53.     div>
    54.  
    55.   div>
    56.  
    57. template>
    58.  
    59. <script>
    60.  
    61.   /** 
    63.    * NavBar 自定义导航栏
    65.    * @description 导航栏组件，主要用于头部导航
    67.    * @tutorial https://ext.dcloud.net.cn/plugin?id=52
    69.    * @property {String} title 标题文字
    71.    * @property {String} height 导航栏高度
    73.    * @property {String} backgroundcolor 导航栏背景色
    75.    * @property {String} leftText 左侧按钮文本
    77.    * @property {String} rightText 右侧按钮文本
    79.    * @property {String} leftIcon 左侧按钮图标
    81.    * @property {String} rightIcon 右侧按钮图标
    83.    * @property {String} leftTextStyle 左侧按钮文本样式
    85.    * @property {String} titleStyle 中间标题文本样式
    87.    * @property {String} rightTextStyle 右侧按钮文本样式
    89.    * @event {Function} clickLeft 左侧按钮点击时触发
    91.    * @event {Function} clickRight 右侧按钮点击时触发
    93.    * @event {Function} clickTitle 中间标题点击时触发
    95.   */
    96.  
    97.   module.exports = {
    98.  
    99.     props: {
    100.  
    101.       height: {
    102.  
    103.         type: String,
    104.  
    105.         default: ""
    106.  
    107.       },
    108.  
    109.       backgroundcolor: {
    110.  
    111.         type: String,
    112.  
    113.         default: ""
    114.  
    115.       },
    116.  
    117.       title: {
    118.  
    119.         type: String,
    120.  
    121.         default: ""
    122.  
    123.       },
    124.  
    125.       leftText: {
    126.  
    127.         type: String,
    128.  
    129.         default: ""
    130.  
    131.       },
    132.  
    133.       rightText: {
    134.  
    135.         type: String,
    136.  
    137.         default: ""
    138.  
    139.       },
    140.  
    141.       leftIcon: {
    142.  
    143.         type: String,
    144.  
    145.         default: ""
    146.  
    147.       },
    148.  
    149.       rightIcon: {
    150.  
    151.         type: String,
    152.  
    153.         default: ""
    154.  
    155.       },
    156.  
    157.       leftTextStyle: {
    158.  
    159.         type: String,
    160.  
    161.         default: ''
    162.  
    163.       },
    164.  
    165.       titleStyle: {
    166.  
    167.         type: String,
    168.  
    169.         default: ''
    170.  
    171.       },
    172.  
    173.       rightTextStyle: {
    174.  
    175.         type: String,
    176.  
    177.         default: ''
    178.  
    179.       },
    180.  
    181.     },
    182.  
    183.  
    184.  
    185.     onInit() {
    186.  
    187.       this.$page.setTitleBar({ text: '自定义导航栏' })
    188.  
    189.     },
    190.  
    191.     clickLeft() {
    192.  
    193.       this.$emit("clickleft");
    194.  
    195.     },
    196.  
    197.     clickRight() {
    198.  
    199.       this.$emit("clickright");
    200.  
    201.     },
    202.  
    203.     clickTitle() {
    204.  
    205.       this.$emit("clicktitle");
    206.  
    207.     }
    208.  
    209.   }
    210.  
    211. script>
    212.  
    213.  
    214.  
    215. <style>
    216.  
    217.   .navbar_content {
    218.  
    219.     display: flex;
    220.  
    221.     align-items: center;
    222.  
    223.     flex-direction: row;
    224.  
    225.   }
    226.  
    227.  
    228.  
    229.   .navbar_btns_left {
    230.  
    231.     width: 150px;
    232.  
    233.   }
    234.  
    235.   .navbar_container {
    236.  
    237.     width: 500px;
    238.  
    239.   }
    240.  
    241.   .text_context {
    242.  
    243.     width: 480px;
    244.  
    245.     text-align: center;
    246.  
    247.   }
    248.  
    249.   .navbar_btns_right {
    250.  
    251.     width: 150px;
    252.  
    253.     justify-content: flex-end;
    254.  
    255.   }
    256.  
    257. style>
    258.

    主页面hello.ux

    1. <import name="nav_bar" src="./Nav_bar/nav_bar.ux">import>
    2.  
    3. <template>
    4.  
    5.   <div class="container">
    6.  
    7.     <text>本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。text>
    8.  
    9.     <text class="section">基本用法text>
    10.  
    11.     <div class="example-body">
    12.  
    13.       <nav_bar height="50px" backgroundcolor="#ffffff" left-icon="{{leftIcon}}" title="标题" @clickleft="back" title-style="font-size: 40px; color:red">nav_bar>
    14.  
    15.     div>
    16.  
    17.     <text class="section">左右显示文字text>
    18.  
    19.     <div class="example-body">
    20.  
    21.       <nav_bar left-icon="{{leftIcon}}" left-text="返回" title="标题" left-text-style="font-size: 30px; color:red;" right-text="菜单" @clickleft="back" @clickTitle="showTitle">nav_bar>
    22.  
    23.     div>
    24.  
    25.     <text class="section">插入slottext>
    26.  
    27.     <div class="example-body">
    28.  
    29.       <nav_bar right-icon="{{rightIcon}}" @clickleft="showCity" @clickright="scan">
    30.  
    31.         <div slot="left">
    32.  
    33.           <div>
    34.  
    35.             <text>北京text>
    36.  
    37.             <image src="../Common/arrowdown.png">image>
    38.  
    39.           div>
    40.  
    41.         div>
    42.  
    43.         <div slot="mid">
    44.  
    45.           <div class="input-view">
    46.  
    47.             <image style="height: 40px; margin-top: 15px" src="../Common/search.png">image>
    48.  
    49.             <input enterkeytype="search" placeholder="输入搜索关键词" @enterkeyclick="confirm" />
    50.  
    51.           div>
    52.  
    53.         div>
    54.  
    55.       nav_bar>
    56.  
    57.     div>
    58.  
    59.   div>
    60.  
    61. template>
    62.  
    63.  
    64.  
    65. <script>
    66.  
    67.   import router from '@system.router'
    68.  
    69.   import prompt from '@system.prompt'
    70.  
    71.   export default {
    72.  
    73.  
    74.  
    75.     data() {
    76.  
    77.       return {
    78.  
    79.         city: "BeiJing",
    80.  
    81.         leftIcon: "../Common/leftIcon.png",
    82.  
    83.         rightIcon: "../Common/rightIcon.png"
    84.  
    85.       }
    86.  
    87.     },
    88.  
    89.  
    90.  
    91.     back() {
    92.  
    93.       router.back()
    94.  
    95.     },
    96.  
    97.     scan() {
    98.  
    99.       prompt.showToast({
    100.  
    101.         message: '扫码',
    102.  
    103.         duration: "100000",
    104.  
    105.         gravity: 'center'
    106.  
    107.       })
    108.  
    109.     },
    110.  
    111.     showCity() {
    112.  
    113.       prompt.showToast({
    114.  
    115.         message: '选择城市',
    116.  
    117.         duration: "100000",
    118.  
    119.         gravity: 'center'
    120.  
    121.       })
    122.  
    123.     },
    124.  
    125.     showTitle() {
    126.  
    127.       prompt.showToast({
    128.  
    129.         message: '标题',
    130.  
    131.         duration: "100000",
    132.  
    133.         gravity: 'center'
    134.  
    135.       })
    136.  
    137.     },
    138.  
    139.     confirm() {
    140.  
    141.       prompt.showToast({
    142.  
    143.         message: '搜索',
    144.  
    145.         duration: "100000",
    146.  
    147.         gravity: 'center'
    148.  
    149.       })
    150.  
    151.     }
    152.  
    153.   }
    154.  
    155. script>
    156.  
    157.  
    158.  
    159. <style>
    160.  
    161.   .container {
    162.  
    163.     flex: 1;
    164.  
    165.     flex-direction: column;
    166.  
    167.     background-color: #ffffff;
    168.  
    169.   }
    170.  
    171.  
    172.  
    173.   .section {
    174.  
    175.     background-color: #afeeee;
    176.  
    177.     margin-top: 20px;
    178.  
    179.     margin-bottom: 20px;
    180.  
    181.     font-size: 30px;
    182.  
    183.     padding: 20px;
    184.  
    185.     width: 100%;
    186.  
    187.   }
    188.  
    189.   .example-body {
    190.  
    191.     flex-direction: row;
    192.  
    193.     padding: 10px;
    194.  
    195.     background-color: #ffffff;
    196.  
    197.     width: 100%;
    198.  
    199.   }
    200.  
    201.  
    202.  
    203.   .input-view {
    204.  
    205.     flex-direction: row;
    206.  
    207.     background-color: #f8f8f8;
    208.  
    209.     height: 60px;
    210.  
    211.     border-radius: 15px;
    212.  
    213.     margin-left: 60px;
    214.  
    215.     margin-right: 60px;
    216.  
    217.     line-height: 30px;
    218.  
    219.   }
    220.  
    221. style>
    222.

     

     欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh

  • 相关阅读:
    技术类公司与业务类公司转型科技智能公司的异同
    合适的工作就是好工作
    【kafka】使用docker启动kafka
    java计算机毕业设计同德佳苑物业信息源程序+mysql+系统+lw文档+远程调试
    最大正方形的边长长度问题解法
    8-Arm PEG-DBCO,八臂-聚乙二醇-二苯基环辛炔,用于修饰生物分子
    VSCode 配置 C++ 环境
    从零开始的 dbt 入门教程 （dbt core 命令进阶篇）
    https
    致美网页练习完整代码
  • 原文地址：https://blog.csdn.net/weixin_44708240/article/details/126259101