效果如下：
代码：
.wxml
<view class="weui-search-bar"><view class="weui-search-bar__form"><!-- 搜索框 --><view class="weui-search-bar__box"><icon class="weui-icon-search_in-box" type="search" size="14"></icon><input type="text" class="weui-search-bar__input" bindblur="你的事件名" placeholder="请输入搜索内容" /></view></view><!-- 搜索按钮,调用搜索查询方法 --><view class="weui-search-bar__cancel-btn" bindtap='你的事件名'>搜索</view></view>
.wxss
.weui-search-bar {position: relative;padding: 8px 10px;display: -webkit-box;display: -webkit-flex;display: flex;box-sizing: border-box;background-color: #EFEFF4;border-top: 1rpx solid #D7D6DC;border-bottom: 1rpx solid #D7D6DC;}/* 搜索框前的放大镜图标 */.weui-icon-search_in-box {position: absolute;left: 10px;top: 7px;}.weui-search-bar__form {position: relative;-webkit-box-flex: 1;-webkit-flex: auto;flex: auto;border-radius: 5px;background: #FFFFFF;border: 1rpx solid #E6E6EA;}.weui-search-bar__box {position: relative;padding-left: 30px;padding-right: 30px;width: 100%;box-sizing: border-box;z-index: 1;}/* 输入框高度与字体大小 */.weui-search-bar__input {height: 28px;line-height: 28px;font-size: 14px;}/* 搜索 */.weui-search-bar__cancel-btn {margin-left: 10px;line-height: 28px;color: #09BB07;white-space: nowrap;}
