回复
HarmonyOS应用开发-搜索界面功能实现
鸿蒙时代
发布于 2022-5-5 16:18
浏览
0收藏
一.创建项目
二.代码示例
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:"这里是您搜索的内容页"
}
})
}
}
}
三.效果
标签
HarmonyOS应用开发-搜索界面功能实现.docx 133.68K 10次下载
赞
1
收藏
回复
相关推荐