這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)搜索框功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

小程序頂部搜索框怎么實現(xiàn)

實現(xiàn)效果如下：

具體代碼：

1、WXML文件

<!--搜索框 --> <view class="weui-search-bar">  <view class="weui-search-bar__form">  <!--點擊之后，出現(xiàn)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" />   <!--輸入款字數(shù)大于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>  <!--動態(tài)出現(xiàn)的“取消”鍵 -->  <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) { //搜索數(shù)據(jù) // getList(this, e.detail.value); this.setData({  inputVal: e.detail.value }); }

PHP中文網(wǎng)，大量免費小程序開發(fā)教程，歡迎學習！