#夏日挑战赛# OpenHarmony ArkUI-JS小组件-导航栏原创

阿毛0920

发布于 2022-6-25 15:23

浏览

1收藏

本文正在参加星光计划3.0–夏日挑战赛

前言

初次接触OpenHarmony，由于习惯JS开发，所以就使用JS实现这个小练习，主要是考虑可能会常用到，于是就封装成一个小组件来玩耍了

效果

#夏日挑战赛# OpenHarmony ArkUI-JS小组件-导航栏-鸿蒙开发者社区

:::

代码

hml代码

../svg_icon/more.hml 更多小图标svg组件

<svg t="1652430837656" class="icon" viewBox="0 0 1024 1024"
     version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2992"
     width="22" height="22"><path d="M243.2 551.424l453.632 453.632c22.528 22.528 59.904 22.528 82.432 0 22.528-22.528 22.528-59.904 0-82.432L366.592 510.464l412.672-412.672c22.528-22.528 22.528-59.904 0-82.432-22.528-22.528-59.904-22.528-82.432 0L243.2 468.992c-23.04 23.04-23.04 59.904 0 82.432z m0 0" p-id="2993"></path></svg>
1.
2.
3.

../svg_icon/more.hml 返回小图标svg组件

<svg t="1652430837656" class="icon" viewBox="0 0 1024 1024"
     version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2992"
     width="22" height="22"><path d="M243.2 551.424l453.632 453.632c22.528 22.528 59.904 22.528 82.432 0 22.528-22.528 22.528-59.904 0-82.432L366.592 510.464l412.672-412.672c22.528-22.528 22.528-59.904 0-82.432-22.528-22.528-59.904-22.528-82.432 0L243.2 468.992c-23.04 23.04-23.04 59.904 0 82.432z m0 0" p-id="2993"></path></svg>
1.
2.
3.

../navBarLayout/navBar.hml 导航栏主体提供插槽 left center right

<div class="back-container" style="background-color:{{backgroundColor}}; 
     height: {{height}}; position:{{position}};">
        <div>
                <slot name="left"></slot>
        </div>

        <div>
                <slot name="center"></slot>
        </div>
        <div>
                <slot name="right"></slot>
        </div>

</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

封装好的导航栏

<element name="navBar" src="../navBarLayout/navBar.hml"></element>
<element name="more" src="../svg_icon/more.hml"></element>
<element name="back" src="../svg_icon/back.hml"></element>
<navBar  background-color="{{backgroundColor}}" height = "{{height}}" 
         position = "{{position}}" >
    <div @click="childBackClick" slot="left" class="navBar-left"  
         if="{{ left == true }}">
        <back></back>
        <text >
                {{backName}}
        </text>
    </div>
    <div slot = "center" if="{{center == true}}" >
        <text style="font-weight: {{weigh}};">
            {{title}}
        </text>
    </div>
    <div if="{{ right == true }}" slot = "right"  style="padding-right: 10px;" 
            class="navBar-left" @click="childMoreClick">
        <more></more>
    </div>
</navBar>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

使用封装好的导航栏

<element name="backNav"  src="../../common/components/backNav/backNav.hml"></element>
	  <!--   顶部导航栏  -->	
            <div>
                <backnav  left="false" right="false" title="{{title}}">
                </backnav>
            </div>


            <div  style="margin-top: 70px;">
                <backnav  @child-more-click='pullMore'
                          @child-back-click="backDump"
                          position="absolute"
                          back-name="返回" >
                </backnav>
            </div>

            <div style="margin-top: 130px;">
                <backnav  center="false"  
                          @child-more-click='pullMore'
                          @child-back-click="backDump"
                          position="absolute"
                          back-name="返回" >
                </backnav>
            </div>

            <div style="margin-top: 190px;">
                <backnav  center="false"
                          right="false"
                          @child-back-click="backDump"
                          position="absolute"
                          back-name="返回" >
                </backnav>
            </div>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

JS代码

/*
    组件BackNav
    props ：backgroundColor 组件背景颜色 default：#fff 赋值方式 #xxxxxx|english|rgb|rgba
            backName  组件返回按钮名字 default ：' ' | string  绑定点击事件  childBackClick 触发抛给父组件
            title 组件标题 default : "标题" | string
            height 组件高度 default ：“50px” 赋值方式 同css
            weigh  标题字体加粗 default ：700
            left 、 center 、right  default ：true  可根据需求更改Boolean值 true 显示 false 隐藏
            childMoreClick  更多按钮点击事件 抛给父组件
 */

export default {
    props:{
        backgroundColor:{ 
            default:"#fff"
        },
        backName : {
            default : ' '
        },
        title:{
            default:"标题"
        },
        height:{
            default: "50px"
        },
        weigh:{
            default:700
        },
        left:{
            default: true
        },
        center:{
            default: true
        },
        right:{
            default: true
        },
        position:{
            default : "fixed"
        }
    },
    data: {
    },
    childBackClick(){ //抛出返回事件给父组件
        this.$emit("childBackClick",'back触发');
    },
    childMoreClick(){ // 抛出更多事件给父组件
        this.$emit("childMoreClick","more触发");
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

css代码

.back-container {

    z-index: 20;
    display: flex;
    justify-content:space-between;
    align-items: center;
    top: 0px;
    width: 100%;
    padding-left:5px;
    font-size: 22px;


}

.navBar-left,.navBar-left{
    display: flex;
    align-items: center;
}


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.