最美的时光|05.小程序项目实战：设置首页搜索框
旁友们 ， 前几章我们已经搭建好了项目的tarbBar结构 ，
如下图所示：
这一章开始 ， 我们来美化细节 ， 主要实现每个页面的页面效果 。
【最美的时光|05.小程序项目实战：设置首页搜索框】今天 ， 我们先来设置首页的页面效果 。
该项目中首页的呈现效果如下 。
从上往下看可知 ， 搜索框要通过自定义组件实现 。
因为 ， 我们随便点击首页的任何一个区域 ， 进行跳转页面（见下图） 。
可以看到 ， 搜索框是一直保持在页面上方不变的 。
几乎首页的所有子页面都会用到搜索框 ，
所以 ， 为了方便多次使用 ， 我们将搜索框变为自定义组件 。
实现步骤如下：
1、点击components 文件夹 ， 新建文件夹 searchinput。
然后右键点击searchinput ， 新建 components ， 就会生成四个基本文件 。
2、声明引用
哪个页面文件要用组件 ， 就在哪个页面文件的json文件中进行声明 。
很显然 ， 本章我们用到的是首页页面 ， 所以要在index.json文件中进行声明 。
我们打开index.json文件 ，
复制searchinput.js 的相对路径至usingcomponents中 。
代码如下：
3、打开index.wxml文件 ， 删除之前的代码 ， 重新写入代码：
保存 ， 小程序界面如下图 ， 可以看到此时组件已被成功引入 。
由上图可看到 ， 组件的颜色为红色 。
这是因为上一章我们设置页面的主图颜色导致的 。
所以 ， 这里打开index.wxss文件 ，
将 themecolor 这行代码注释掉就 ok 了 。
颜色注释掉后 ， 组件的颜色就显示正常了 。
4、将组件设为搜索框 ， 即小程序页面中展示的样子 。
打开searchinput.wxml 文件 ， 删除之前的全部代码 ， 代码如下：
保存 ， 小程序界面如下 ， 出现"搜索" 。
推荐阅读
- 西安扑通美美与共！国美携手美的一起玩票大的！
- 小小可爱讲搭配|一身皮草加身变贵妇人，60岁美的不真实，刘亦菲妈妈高调露面
- 杜绍斐DUSHAOFEI|贝尔魔咒再现，爱马仕发布全新月读时光纽约陨石盘腕表｜直男Daily
- 摄像头|华为Mate40Pro真机正式确认，网友：这才是最美的华为手机
- 穿搭|深秋时节凉意浓，换上知性、简约、通勤短外套，让你美的不一般
- 小建小达人|连衣裙搭配高跟鞋，皮肤白皙紫衫映容，美的出众又优雅
- 写作|透视大宗交易：10月19日共成交62笔，美的集团成交3.33亿元
- 当大米和美的电饭煲相遇 谁能抵住这对高糖CP发“低糖”？
- |殷桃40岁还美的出众，牛仔外套配T恤扮嫩成功，皮肤白皙宛如少女
- 游戏时光VGtime|Switch游报：世界陷入黑暗，必须寻找失落的月亮