#夏日挑战赛# OpenHarmony ArkUI-JS 使用tabs组件写的Layout组件 原创

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

前言

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

效果

代码

hml代码

layout组件 有四个插槽，one、two、three、four

<div class="container">
    <tabs onchange="changePage"  >

        <tab-content   style="background-color: {{backgroundColor}};" >
             <slot name="one">

             </slot>
            <slot name="two">

            </slot>
            <slot name="tree">

            </slot>
            <slot name="four">

            </slot>

        </tab-content>
        <tab-bar mode="fixed"  ref="tes">
            <div class="b-item-cont" for="imgUrl" 
                 style="background-color: {{menuCustomStyle.backgroundColor}};">
                <div>
                    <image src="{{ $item.show ? activeBaseUrl + $item.active  : iconBaseUrl + $item.icon }}"></image>
                </div>
                <div class="b-item-tite">
                    <text style="font-size:{{menuCustomStyle.fontSize}};
                                  color:{{ $item.show ? menuCustomStyle.activeColor : menuCustomStyle.color }};" >
                        {{$item.title}}
                    </text>
                </div>
            </div>
        </tab-bar>
    </tabs>
</div>

JS 代码

/*layout 组件props
  iconBaseUrl 导航菜单图片路径, type : string, default : "common/images/icon/"
  activeBaseUrl 当前激活的菜单图片路径, type : string, default : "common/images/icon_active/"
  menu 导航栏信息 type:[Object], {
                                    icon: 未激活时的图片, 例如 xxx.png
                                    active :激活时的图片,
                                    title : 标题

                                }


*/
export default {
    props:{
        iconBaseUrl:{
            default:"common/images/icon/"
        },
        activeBaseUrl:{
            default:"common/images/icon_active/"
        },
        menu:{
            default:[
                {
                    icon :  "shouye.png",
                    active :"active_shouye.png",
                    title: "标签1"
                },
                {
                    icon: "gouwuche.png",
                    active: "active_gouwuche.png",
                    title: "标签2"
                },
                {
                    icon :  "xiangmu.png",
                    active :"active_xiangmu.png",
                    title: "标签3"
                },
                {
                    icon :  "wo.png",
                    active :"active_wo.png",
                    title: "标签4"
                }
            ]
        },
        menuCustomStyle:{
            default:{
                activeColor : "#1989fa",
                backgroundColor : "#fff",
                fontSize : "19px",
                color : "#343434"
            }
        },
        backgroundColor:{
            default : "#f7f5fb"
        }
    },
    data(){
        return {
                imgUrl:[]
          }
    },
    changePage(e){ //发生change事件时，根据当前页数来激活

        for(let i = 0; i < this.imgUrl.length ; i++){
            if( !this.imgUrl[i].show ) continue;
            this.imgUrl[i].show = false;
        }
        this.imgUrl[e.index].show = true;

        this.$emit("childLayoutChange",this.imgUrl[e.index].title);
    },
    onInit(){
        for (let index = 0; index < 4 ; index++) {//初始化导航
            let show = index === 0 ? true : false;
            let temp = {
                ...this.menu[index],
                show
            }
            this.imgUrl.push(temp)

        }
    }
}

css代码

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}


tab-content{
    width: 100%;
    height: 100%;
}
tab-bar{
    height: 100px;
    width: 100%;
    padding: 0;
    padding-top: 4px;
}
.b-item-cont{
    height:150px ;
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content:center;
    position: relative;

}
.b-item-cont div{
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;

}
.b-item-cont div image{
    width: 42px;
    
}
.b-item-cont .b-item-tite{
    padding-top: 9px;
    text-align: center;

}

调用组件

<div class="container">
    <layout  @child-layout-change='setTitle' >


        <div slot="one"  >
            <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>





        </div>
        <div slot="two"  >
            <div style="margin-top: 80px;">
                <cardBox>
                </cardBox>
            </div>
        </div>
        <div slot="tree"  >
            <div style="height: 100%; width: 100%; background-color: red ; ">

            </div>
        </div>
        <div slot="four"  >
            <div style="height: 100%; width: 100%; background-color: beige; ">

            </div>
        </div>
    </layout>
</div>

JS代码

import prompt from '@system.prompt';

export default {
    data: {
        title:"",
        menu:[
            {
                icon :  "shouye.png",
                active :"active_shouye.png",
                title: "标签1"
            },
            {
                icon: "gouwuche.png",
                active: "active_gouwuche.png",
                title: "标签2"
            },
            {
                icon :  "xiangmu.png",
                active :"active_xiangmu.png",
                title: "标签3"
            },
            {
                icon :  "wo.png",
                active :"active_wo.png",
                title: "标签4"
            }
        ]
    },
    backDump(e){
        prompt.showToast({
            message: e._detail
        })
    },
    pullMore(e){
        prompt.showToast({
            message: e._detail
        })
    },
    setTitle(e){
        this.title = e._detail;

    },
    onInit(){
        this.title = this.menu[0].title;
    }


}

最后

这个感觉不太理想，还需优化…
仓库链接 没注释…先赶期末考啦