微信小程序自定义搜索框

小程序自定义搜索框固定在头部。

代码示例：

<view class="inputtop">
	<input type="text" placeholder="输入内容进行检索" class='input' placeholder-class="placeholder" bindblur="onBindFocus" value="{{searchCode}}" ></input>
    <icon class='icon' type="clear" size="18" wx:if="{{searchPanelShow}}"  color="#C0C4CC"  catchtap='onCancelImgTap'/>
    <view class="inputbottom"  bindtap='getContentInfo'><icon type="search"  size="20" color="#5ba2f3"></icon></view>
	</view>
<view>

/* 搜索样式 */
.inputtop {
  height: 120rpx;
  position: relative;
  display: flex;
justify-content: center;
  align-items: center;
  background-color: #409EFF;
}
.input{
background-color: #F2F6FC;
height:80rpx ;
width:70%;
font-size: 32rpx;
padding-left: 40rpx;
border-bottom-left-radius: 40rpx;
 border-top-left-radius: 40rpx;
}
.inputbottom{
  height:80rpx;
  width:13%;
  border-bottom-right-radius: 40rpx;
 border-top-right-radius: 40rpx;
  background-color: white;
  display: flex;
  align-items: center;
justify-content: center;
}
.icon{
  position:absolute;
  right:22%;
  z-index:999
}