文章目录
- 一、主要内容
- 二、实现
- 三、效果图
- 四、结尾
一、主要内容
搜索栏的实现（主页面是导航栏，点进去变成搜索栏）
导航栏图1：
:搜索栏图2：
二、实现
1、基本布局
首页是index，打出“我是首页”便于理解。windows中需要修改的语句已在图片中给出
2、建立searchbar组件
①和pages等文件夹并列建立components（组件）文件夹
②在components文件夹下添加searchbar（搜索栏）文件夹
③在searchbar文件夹内添加Component（生成四个文件）
3、配置index.json文件
主页面index想使用searchbar这个组件，必须在index.json配置文件中声明
4、显示searchbar组件
声明后，可以在index.wxml文件中去使用它了
5、给搜索栏进行布局
设置searchbar组件，在searchbar.wxml文件中一大盒子里套着导航小盒子
大盒子样式（searchBar）
导航小盒子（nav），通过点击小盒子可以导入search（搜索）页面
6、新建images文件夹
在上述组件中，我们在导航栏其中添加一个放大镜的背景图片，这里可以并列pages等文件新建images文件夹来存放图片
7、Base64转码
在css中设置背景图片时（以下url里内容方便理解，并非正确）
background-image:url("/images/放大镜.jpg/png等等等文件")发现无法向wxml文件中插入图片一样使用这种路径，由于微信小程序为压缩空间，所以这里采用base64图片转换工具
（这里提供一款自用的base64图片在线转换工具网站）base64图片在线转换工具
8、设置searchbar组件样式
searchbar.wxss图1：
searchbar.wxss图2：
9、search问题
在我们点击主页面的导航栏后，发现跳转到search页面还是一样的场景，中间并不是输入框（前提：search.wxml中也使用searchbar组件）
10、增加searchbar属性
在searchbar.js文件中的properties（属性）对象中咱们新增isnavigator对象，类型：布尔类型，值：true（默认正确），方便后面导航栏还是搜索栏做选择
11、searchbar.wxml修改
由于上述问题，我们将该文件进行修改，增加其选择性
如果isNavigator（是导航栏），那么样式是nav，点击可导向search文件，否则就是输入栏
12、新增输入框样式
在searchbar.wxss文件中新增searchBox和searchInput样式
13、search文件声明
由于search文件采用searchbar组件的第二个导航选项，而searchbar.js中默认的是true（会选择第一个导航选项），所以这里增加条件，让search.wxml文件中引用时加入
<searchbar isNavigator="{{false}}"></searchbar>
三、效果图
1、首页面
2、搜索页面
四、结尾
有任何问题的话，欢迎各位指出~ ヾ(◍°∇°◍)ﾉﾞ
