中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
本文正在参加星光计划3.0–夏日挑战赛
初次接触OpenHarmony,由于习惯JS开发,所以就使用JS实现这个小练习,主要是考虑可能会常用到,于是就封装成一个小组件来玩耍了
layout组件 有四个插槽,one、two、three、four
layout组件
<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>
/*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) } } }
.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; } }
这个感觉不太理想,还需优化… 仓库链接 没注释…先赶期末考啦
微信扫码分享