微信小程序不错的搜索框样式，复制可用

本是古典何须时尚 2022-05-14 11:42 532阅读 0赞

**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" placeholder="请输入查询内容" value="{ {SearchData.value}}" bindinput='SearchInput' bindconfirm="SearchConfirm" />
          <view class="weui-icon-clear" wx:if="{ {SearchData.value.length > 0}}" bindtap="SearchClear">
            <icon type="clear" size="14"></icon>
          </view>
        </view>
      </view>
        <view class="weui-search-bar__cancel-btn" bindtap="SearchConfirm">
             <text wx:if="{ {SearchData.value.length>0}}" data-key='search'>搜索</text>
             <text wx:else data-key='back'>返回</text>
        </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 { margin-right: 8px; font-size: inherit; }
    
    .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: #fff; 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-icon-clear { position: absolute; top: 0; right: 0; padding: 7px 8px; font-size: 0; }
    .weui-search-bar__label { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; border-radius: 3px; text-align: center; color: #9b9b9b; background: #fff; line-height: 28px; }
    .weui-search-bar__cancel-btn { margin-left: 10px; line-height: 28px; color: #DC3C24; white-space: nowrap; }

![这里写图片描述][70]

[70]: /images/20220514/532cae4f4bdc4158a4464bc7701e4df4.png