做个小程序（三）——导航栏&搜索框

hello，项目都会新建了么，小程序页面都摸熟悉了的话我们就开始做一个小程序上手练一练吧！
我们接下来要做的就是做一个简易豆瓣电影小程序。

简易豆瓣小程序

既然要做我们就需要做好产品分析详细的来了解一下下究竟需要我们实现那些东西。

主界面

主界面由顶部导航栏，头部搜索栏，以及下面的三种影视列表组成。

更多页面

更多页面和主页面的差不多，唯一的区别就是下面是单一的影视类别的影视，点击主页面的更多，就可以跳转到这里。

详情页面

详情页面石油顶部的导航栏，下面的影视介绍，中部的豆瓣标签以及底部的评论组成。

搜索

详情页面石油顶部的导航栏，以及一个搜索框，还有页面下部的影视搜索列表组成。

历史搜索

详情页面石油顶部的导航栏，以及一个搜索框，还有下面的历史记录组成。

我们总览了所有的页面，我们现在可以进入到我们的新建小项目中为这几个项目新建一下各自的page页面，对应一下基本的项目构架。

我们接下来可以实现一下豆瓣中通用的部分：

豆瓣导航栏实现

• 在app.json中修改一下界面的导航字样
  

豆瓣搜索框实现

既然说到搜索框那我们就不得不提出组件这个概念，组件是啥组件就像是你们家的火锅底料，他可以每次用每次取，不用每一次都自己去重新配置配方，哎我又想吃火锅了，也有点儿想我们程序中的函数，哪儿用到它就到哪引用。
话不多说开干！

组件定义

• 首先创建一个总的文件夹：用来放组件我这里管它叫component位置一般在二级夹。

• 

• 然后再来创建一个文件夹放当前需要的组件
  

• 右击这个组件文件夹然后选择新建component起个合适的名字我这里的组件管它叫searchbar。
  就会生成一些基本文件
  
  

• 首先我们写出wxml基本样式：

<!--componests/searchbar/searchbar.wxml-->
<view class='searchbar'>
  <navigator class='search-navigator'></navigator>
  <view class='search-input-group'>
    <!-- 添加input事件 -->
    <input class='search-input' placeholder="搜一搜" ></input>
  </view>
</view>

• 再用css给它美化：

.searchbar{
   
  background-color: #41be