How to implement the search box at the top of the mini program

This article mainly introduces the search box function of the mini program in detail, which has certain reference value. Interested friends can refer to it

How to implement the search box at the top of the mini program

The effect is as follows:

Specific code:

1. WXML file

<!--搜索框 -->
<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 file

.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 file

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 Chinese website, a large number of free small program development Tutorial, welcome to learn!

The above is the detailed content of How to implement the search box at the top of the mini program. For more information, please follow other related articles on the PHP Chinese website!