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

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

1.
2.
3.
4.

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

.txt {
    font-size: 24px;
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

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"
        })
    }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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

1.
2.
3.
4.
5.

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:"这里是您搜索的内容页"
                }
            })
        }
    }
}

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.