05. 小程序项目实战:设置首页搜索框

旁友们，前几章我们已经搭建好了项目的tarbBar结构，

如下图所示：

这一章开始，我们来美化细节，主要实现每个页面的页面效果。

今天，我们先来设置首页的页面效果。

该项目中首页的呈现效果如下。

从上往下看可知，搜索框要通过自定义组件实现。

因为，我们随便点击首页的任何一个区域，进行跳转页面（见下图）。

可以看到，搜索框是一直保持在页面上方不变的。

几乎首页的所有子页面都会用到搜索框，

所以，为了方便多次使用，我们将搜索框变为自定义组件。

实现步骤如下：

1、点击components 文件夹，新建文件夹 searchinput 。

然后右键点击searchinput，新建 components，就会生成四个基本文件。

2、声明引用

哪个页面文件要用组件，就在哪个页面文件的json文件中进行声明。

很显然，本章我们用到的是首页页面，所以要在index.json文件中进行声明。

我们打开index.json文件，

复制searchinput.js 的相对路径至usingcomponents中。

代码如下：

3、打开index.wxml文件，删除之前的代码，重新写入代码：

保存，小程序界面如下图，可以看到此时组件已被成功引入。

由上图可看到，组件的颜色为红色。

这是因为上一章我们设置页面的主图颜色导致的。

所以，这里打开index.wxss文件，

将 themecolor 这行代码注释掉就 ok 了。

颜色注释掉后，组件的颜色就显示正常了。

4、将组件设为搜索框，即小程序页面中展示的样子。

打开searchinput.wxml 文件，删除之前的全部代码，代码如下：

保存，小程序界面如下，出现"搜索"。

5、给搜索框加外观效果。

将searchinput.wxss 文件修改为searchinput.less 文件，

并写入如下代码：

.search_input{
height: 90rpx;
padding: 10rpx;
background-color: var(--themeColor);
navigator{
height: 100%;
display: flex; /* 伸缩盒子 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
background-color: #fff; /* 设置导航颜色：白色 */
border-radius: 15rpx; /* 圆角边框 */
color: #666;
}
}

保存，就会自动编译生成 searchinput.wxss 文件，

小程序的界面效果也出现，如下图：

6、设置跳转效果。

打开 searchinput.wxml 文件，

在navigator标签后面加入 open-type 有效值，

就可实现跳转tarbBar 页面。

完整的代码如下：

<view class="search_input">
<navigator url="/pages/search/index" open-type="navigate"> 搜索 </navigator>
</view>

保存后，点击页面上的搜索框，就会发生跳转，跳转后页面如下：

经过以上6个步骤，

我们已成功将搜索框设置为自定义组件，

完成了首页页面的搜索框设置。

1、点击components 文件夹，新建文件夹 searchinput ；

2、在 index.json文件中进行声明引用；

3、在 index.wxml文件中引入组件；

4、将组件设为搜索框，即小程序页面中展示的样子；

5、给搜索框加外观效果；

6、设置跳转效果。

你学会了吗？？