广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

这篇文章主要为大家详细介绍了小程序实现搜索框功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

小程序顶部搜索框怎么实现

实现效果如下：

具体代码：

1、WXML文件

<!--搜索框 --><view class="weui-search-bar"> <view class="weui-search-bar__form"> <!--点击之后，出现input框 --> <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="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />  <!--输入款字数大于0，则显示清除按钮 -->  <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">  <icon type="clear" size="14"></icon>  </view> </view> <!--没点击之前，只是一些文字和图标 --> <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">  <icon class="weui-icon-search" type="search" size="14"></icon>  <view class="weui-search-bar__text">搜索</view> </label> </view> <!--动态出现的“取消”键 --> <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view></view>

2、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__text { display: inline-block; font-size: 14px; vertical-align: middle;}.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-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: #FFFFFF; line-height: 28px;}.weui-search-bar__cancel-btn { margin-left: 10px; line-height: 28px; color: #09BB07; white-space: nowrap; font-size: 30rpx;}

3、JS文件

showInput: function () {this.setData({ inputShowed: true});},hideInput: function () {this.setData({ inputVal: "", inputShowed: false});// getList(this);},clearInput: function () {this.setData({ inputVal: ""});// getList(this);},inputTyping: function (e) {//搜索数据// getList(this, e.detail.value);this.setData({ inputVal: e.detail.value});}

PHP中文网，大量免费小程序开发教程，欢迎学习！

以上就是小程序顶部搜索框怎么实现的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~