鸿蒙应用开发之搜索框

在日常使用软件过程中,搜索功能是必不可少的但在鸿蒙应用开发中搜索功能是如何实现的呢?其中官方文档中为我们提供了search组件即搜索框组件。接下来让我们通过简单的例子来熟悉一下search组件吧。

属性

首先我们将搜索界面搭建好。以下是官方为我们提供搜索组件的属性列表,除列表中的功能搜索组件还支持通用属性。

名称

类型

默认值

必填

描述

icon

string

-

搜索图标,默认使用系统搜索图标,图标格式为svg,jpg和png。

hint

string

-

搜索提示文字。

value

string

-

搜索框搜索文本值。

searchbutton5+

string

-

搜索框末尾搜索按钮文本值。

menuoptions5+

Array<MenuOption>

-

设置文本选择弹框点击更多按钮之后显示的菜单项。

搜索界面

在js工程中创建searchView界面。

 searchView.hml

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

 界面效果

功能实现

在官方文档中我们可以看到search组件支持以下事件。

名称

参数

描述

change

{ text:newText }

输入内容发生变化时触发。

submit

{ text:submitText }

点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发。

translate5+

{ value: selectedText }

设置此事件后,进行文本选择操作后文本选择弹窗会出现翻译按钮,点击翻译按钮之后,触发该回调,返回选中的文本内容。

share5+

{ value: selectedText }

设置此事件后,进行文本选择操作后文本选择弹窗会出现分享按钮,点击分享按钮之后,触发该回调,返回选中的文本内容。

search5+

{ value: selectedText }

设置此事件后,进行文本选择操作后文本选择弹窗会出现搜索按钮,点击搜索按钮之后,触发该回调,返回选中的文本内容。

optionselect5+

{ index:optionIndex, value: selectedText }

文本选择弹窗中设置menuoptions属性后,用户在文本选择操作后,点击菜单项后触发该回调,返回点击的菜单项序号和选中的文本内容。

接下来我们以submit事件来实现获取搜索框输入文本功能。在hml代码中我们已经将search绑定submit事件。

 我们只需要在js代码中将submint所绑定的submint函数实现即可。

searchView.js

import prompt from '@system.prompt';
export default {
    data: {
        title: 'World'
    },
    submit(e){
        prompt.showToast({
            message: e.text
        });
    },
}

实现效果

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是刘小猿呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值