HarmonyOS应用开发-搜索界面功能实现

一．创建项目

二．代码示例
Index.hml

<div class="container">
   <text class="txt" onclick="goSearched"><span>{{title}}</span> </text>
</div>

Index.css

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.txt {
    font-size: 24px;
}

Index.js

import router from '@system.router';
import file from '@system.file';
import window from '@ohos.window';
export default {
    data: {
        title: "点击去下一页"
    },
    goSearched(){
        router.push({
            uri:"pages/searched/searched"
        })
    }
}

Searched.hml

<div class="container">
    <search hint="请输入搜索内容" value="" searchbutton="搜索" onchange="change" @search="search" onsubmit="submit">
    </search>
</div>

Searched.js

import router from '@system.router';
import prompt from '@system.prompt';
export default {
    data: {
        content: ''
    },
    change(e){
        this.content  = e.text
        console.log("搜索值:" + this.content)
    },
    submit(){
        if (this.content == "") {
            prompt.showToast({
                message:"您搜索的内容为空"
            })
        }else{
            router.push({
                uri:'pages/index/index',
                params:{
                    title:"这里是您搜索的内容页"
                }
            })
        }
    }
}

三．效果