微信小程序顶部搜索框（带源码建议收藏）

瑾！

已于 2023-06-15 14:08:50 修改

阅读量1.5w

点赞数 18

文章标签：小程序

于 2021-06-03 14:56:39 首次发布

本文链接：https://blog.csdn.net/qq_57739390/article/details/117522071

版权

本文介绍了微信小程序中创建搜索框的方法，从基础到进阶，包括简单的静态搜索框及可编辑状态切换，以及京东风格的点击跳转搜索页面的实现，提供了完整的源码示例。

摘要由CSDN通过智能技术生成

这是一个最简单的顶部搜索框代码如下

wxml

<view>
     <view>
        <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="请输入搜索内容"/>
                </view>
            </view>
            <!-- 搜索按钮,调用搜索查询方法 -->
            <view class="weui-search-bar__cancel-btn" bindtap='方法名a'>搜索</view>
        </view>
    </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: 14p