小程序自定义搜索框固定在头部。
代码示例:
<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
}