鸿蒙os第四次学习

目标界面：

一、搜索框的实现

在common文件夹下创建search文件夹（.hml,.css,.js）

.hml

<div class="search-container">
    <div class="search-input">
        <image class="search-input-image" src="/common/images/search.png"></image>
        <text class="search-input-text">想吃什么搜这里，比如川菜</text>
    </div>
</div>

.css

.search-container {
    padding: 10px 15px;
}

.search-input {
    height: 40px;
    width: 100%;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    border: 0.5px solid #ee742f;
}

.search-input-image {
    width: 20px;
    height: 20px;
}

.search-input-text {
    font-size: 12px;
    font-weight: 100;
}

.index-inner-bg {
    background-color: #fff;
}

.cate-inner-bg {
    background-color: #f2f2f2;
    border-width: 0;
}

.index-outer-bg {
    background-color: #f2f2f2;
}

.cate-outer-bg {
    background-color: #fff;
}

二、顶层效果实现

.hml

<element name="cb-menu"src="./menu/menu"></element>
<element name='comp' src='../../../components/tabbar/tabbar.hml'></element>
<element name='cb-search' src="../../../common/components/search/search"></element>
<div class="cate-container">
    <div class="cate-header">
        <div class="cate-header-nav">
            <div class="cate-header-nav-item" @click="handleSliderClick('category')">
                <text class="item-text">
                    分类
                </text>
            </div>
            <div class="cate-header-nav-item" @click="handleSliderClick('material')">
                <text class="item-text">
                    食材
                </text>
            </div>
            <div if="{{type==='category'}}" class="cate-header-nav-slider">
                <text class="slider-text">
                    分类
                </text>
            </div>
            <div else class="cate-header-nav-slider move">
                <text class="slider-text">
                    食材
                </text>
            </div>
        </div>
    </div>
    <comp index="1"></comp>
    <cb-search from="cate"></cb-search>
    <cb-menu menu-data="{{filteredMenuData}}" first-item="{{type==='category'?'热门':'肉类'}}"></cb-menu>

</div>

.css

.cate-container {
    flex-direction: column;
}

.cate-header {
    width: 100%;
    height: 44px;
    background-color: #ee742f;
    justify-content: center;
    align-items: center;
}

.cate-header-nav {
    width: 140px;
    height: 30px;
    border-radius: 30px;
    border: 0.5px solid #FFF;
    position: relative;
    z-index: 1;
}

.cate-header-nav-item {
    flex: 1;
    justify-content: center;
    align-items: center;
    height: 30px;
}

.item-text {
    font-size: 12px;
    color: #FFF;
}

.cate-header-nav-slider {
    position: absolute;
    left: 0;
    border-radius: 30px;
    width: 70px;
    height: 30px;
    background-color: #FFF;
    z-index: 0;
    justify-content: center;
    align-items: center;
    transition: left 200ms ease-in;
}

.slider-text {
    font-size: 12px;
    color: #ee742f;
}

.move {
    left: 70px;
}

.js

// @ts-nocheck
import menuData from "../../../common/data/cookbook-category.json"
export default{
    data:{
        type:'category',
        menuData:[],
    },
    handleSliderClick(type){
        this.type = type
    },
    computed:{
        filteredMenuData(){
        return this.menuData[this.type]
        }
    },
    onInit(){
        this.menuData = menuData.data
    }
}

三、菜单功能的实现

在category下创建menu文件夹

.hml

<div class="menu-container">
    <div class="menu-tab">
        <div
                class="menu-tab-item {{$item === currenTab?'menu-tab-item-active':'menu-tab-item-normal'}}"
                for="{{tabs}}"
                @click="handleTabClick($item)"
                >
            <text class="menu-tab-item-text">
                {{$item}}
            </text>
        </div>
    </div>
    <div class="menu-list">
        <div class="menu-list-item" for="{{lists}}">
            <text class="menu-list-item-text">
                <span>{{$item}}</span>
            </text>
        </div>
    </div>
</div>

.css

.menu-container {
    flex: 1;
    border-top: 0.5px solid #CCC;
}

.menu-tab {
    width: 100px;
    background-color: #f3f3f3;
    flex-direction: column;
}

.menu-tab-item {
    height: 34px;
    justify-content: center;
    align-items: center;
    width: 100px;
}

.menu-tab-item-text {
    font-size: 12px;
    font-weight: 100;
    height: 100%;
/*    align-content: stretch;*/
}

.menu-tab-item-normal {
    background-color: #f3f3f3;
}

.menu-tab-item-text-normal {
/*    font-size: 12px;*/
/*    font-weight: 100;*/
/*    height: 100%;*/
/*    align-content: stretch;*/
    color: #000;
    border-bottom: 0;
}

.menu-tab-item-active {
    background-color: #FFF;
}

.menu-tab-item-text-active {
    font-size: 12px;
    font-weight: 100;
    height: 100%;
/*    align-content: stretch;*/
/*    color: #ee742f;*/
/*    border-bottom: 2px solid #ee742f;*/
}

.menu-list {
    flex: 1;
    flex-wrap: wrap;
}

.menu-list-item {
    width: 33.333333%;
    height: 40px;
    justify-content: center;
    align-items: center;
}

.menu-list-item-text {
    font-size: 12px;
    font-weight: bold;
}

.js

export default{
    props:['menuData','firstItem'],
    data(){
        return{
            currentTab:this.firstItem
        }
    },
    computed:{
        tabs(){
        return Object.keys(this.menuData)
        },
        lists(){
            return this.menuData[this.currentTab]
        }
    },
    handleTabClick(currentTab){
        this.currentTab = currentTab
    },
    onReady() {
        this.$watch('firstItem', (newValue) => {
            this.currentTab = newValue
        })
    }
}

四、整体思路

1.先将主界面的大体框架搭好，诸如顶部的导航栏，底部的菜单栏，内容框等等

2.再建立新的文件夹，将组件的代码分别放入不同文件夹

3.再在主页面中导入组件，并声明、引用