小程序 搜索框组件用什么组件

来源：蜘蛛抓取(WebSpider) 时间：2016-04-18 04:54 标签： 小程序 搜索框组件

今天给大家带来顶部简单纯文字導航列表制作好以后效果图如下：

一、wxml页面代码如下：

为组件设置一个容器在容器中放置搜索图标、输入框、清除文字按钮和搜索按钮。

（1）光标不聚焦没有任何输入——显示搜索图标、placeholder和搜索按钮。

（2）光标聚焦没囿任何输入——光标闪烁，显示搜索图标、placeholder和搜索按钮

（3）光标聚焦，有输入——光标闪烁显示搜索图标、输入文字、清除按钮和搜索按钮。

（4）光标不聚焦有输入——显示搜索图标、输入文字、清除按钮和搜索按钮。

（5）按回车搜索——清除按钮隐藏

（6）点击搜索按钮——清除按钮隐藏。

由此可见需要 input 组件的聚焦和键盘输入事件。

triggerEvent：自定义组件触发事件时需要使用 triggerEvent 方法，指定事件名、detail对象和倳件选项


搜索分别为 closeIcon 和 搜索按钮添加点击事件。

分别为 closeIcon 和 搜索按钮添加点击事件

工程的名字是 cookbook，这里组件前缀统一为 ck

至此，搜索组件已完成初步开发

从数据中选择需要進行搜索过滤的数据集

该组件通过 过滤列(filterProps)属性 模糊查询所绑定data对过滤数据集进行过滤。

我要回帖

更多关于 小程序 搜索框组件 的文章

 

随机推荐