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

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

实现效果如下：

具体代码：

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

.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; }

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中文网，大量免费小程序开发教程，欢迎学习！

以上就是小程序顶部搜索框怎么实现的详细内容，更多内容请关注技术你好其它相关文章！