返回发烧友论坛
发 帖  

[文章]HarmonyOS应用开发-搜索界面功能实现

李洋水蛟龙
2022-05-05 16:41:22
阅读量0
HarmonyOS
1
3


一．创建项目

二．代码示例
Index.hml
  1. <div class="container">
  2.    <text class="txt" onclick="goSearched"><span>{{title}}</span> </text>
  3. </div>
复制代码
Index.css
  1. .container {
  2.     flex-direction: column;
  3.     justify-content: center;
  4.     align-items: center;
  5.     width: 100%;
  6.     height: 100%;
  7. }

  9. .txt {
  10.     font-size: 24px;
  11. }
复制代码

Index.js
  1. import router from '@system.router';
  2. import file from '@system.file';
  3. import window from '@ohos.window';
  4. export default {
  5.     data: {
  6.         title: "点击去下一页"
  7.     },
  8.     goSearched(){
  9.         router.push({
  10.             uri:"pages/searched/searched"
  11.         })
  12.     }
  13. }
复制代码

Searched.hml
  1. <div class="container">
  2.     <search hint="请输入搜索内容" value="" searchbutton="搜索" onchange="change" @search="search" onsubmit="submit">
  3.     </search>
  4. </div>
复制代码

Searched.js
  1. import router from '@system.router';
  2. import prompt from '@system.prompt';
  3. export default {
  4.     data: {
  5.         content: ''
  6.     },
  7.     change(e){
  8.         this.content  = e.text
  9.         console.log("搜索值:" + this.content)
  10.     },
  11.     submit(){
  12.         if (this.content == "") {
  13.             prompt.showToast({
  14.                 message:"您搜索的内容为空"
  15.             })
  16.         }else{
  17.             router.push({
  18.                 uri:'pages/index/index',
  19.                 params:{
  20.                     title:"这里是您搜索的内容页"
  21.                 }
  22.             })
  23.         }
  24.     }
  25. }
复制代码

附件：
HarmonyOS应用开发-搜索界面功能实现.docx
(133.68 KB, 下载次数: 1)


举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友