HarmonyOS應(yīng)用開發(fā)案例 搜索界面功能實現(xiàn)

一．創(chuàng)建項目

二．代碼示例

Index.hml

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

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:"您搜索的內(nèi)容為空"
            })
        }else{
            router.push({
                uri:'pages/index/index',
                params:{
                    title:"這里是您搜索的內(nèi)容頁"
                }
            })
        }
    }
}