9-1 电影搜索页面构建（上）

音乐播放还有小问题，就是音乐播放完毕之后，图标的状态没有恢复到未播放完的状态。

在页面movies.xwml中，嵌入一个组件，就是input组件。

看看需要哪些？

value：输入框的初始内容

type input 的类型

placeholder 输入框为空时占位符

placeholder-style 指定 placeholder 的样式

focus 获取焦点

confirm-typeString"done"设置键盘右下角按钮的文字1.1.0

bindfocus输入框聚焦时触发，event.detail = {value: value}

bindblur输入框失去焦点时触发，event.detail = {value: value}

bindconfirm 点击完成按钮时触发，event.detail = {value: value}

bindinput 当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。适合做实施检索，就是每输入一个字，检索一次。特别是跨表搜索基本不可能。挑战很多大，数据库索引要建立的很好。

考虑以下问题：

第一、当我们手指点击input，弹出搜索页面，就需要找到这样一个事件，就是bindfocus

第二、如何监听文字输入完成。1、模拟器下，输入完成后，回车，输入的数据采集，发给豆瓣。2、失去焦点时候，点空白。完成数据采集。3、如果手机时候，输入完成后，点击键盘上完成。

下面开始构建搜索🔍

首先在movies.wxml写组件input，接着来一个🔍的icon。icon和input的设置如下：

相关样式设置如下：

开始定义bindfocus输入框聚焦时触发的事件，onbindfocus，

思考一下，搜索页面，是不是要像movies一样做成page？

这里是不应该的，因为要动态地控制显隐。不适合做成page

在movie中写一个页面，直接导入movieGridTemplate就可以了。

写一下search-pannel样式：

top是根据搜索框高度设置的。

暂时在movieGridTemplate中写一个text标签，包含文字“搜索页面出现了”

在onbindfocus函数中使用两个变量，来控制“电影页面”、“搜索页面”的显示和隐藏。

现在data设置这两个变量

onbindfocus函数定义如下

movies.wxml中绑定变量，控制显隐：

同样，在

另外别忘了，在movie.wxml中引入movieGridTemplate模板。

下一步，如何回到原来“电影页面”呢？也就是要一个“小叉叉”

小叉叉，和小叉叉上的方法，如上图所示：

编写小叉叉的样式：

给小叉叉添加一个数据绑定，当电影页面时候，小叉叉是不显示的