小程序---搜索框实现

实现效果图：

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

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

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

小程序---搜索框实现相关推荐

小程序搜索框_微信小程序搜索及优化相关知识科普
生活中我们常常会用到微信小程序,但很多人不知道该如何搜索.找到小程序:而有些已经做了自己的小程序的商家,也不懂怎么提升自己的微信小程序搜索效果.所以下面就跟大家科普下这两个问题. 1.怎么搜索微信小程 ...
小程序搜索框_微信怎么搜索小程序？小程序能有什么用？
微信小程序已经发布了三年多,现在很多人在日常生活中离不开它.但是,新手经常会遇到这种情况:使用小程序后,他们找不到它:如果他们想再次使用它,他们不知道在哪里可以找到它.因此,以下内容将告诉您如何查找小 ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
微信小程序搜索框回车搜索事件
这里写的是在微信小程序里的搜索框,按软键盘回车键触发搜索事件. 首先前台代码,这是整个搜索框代码 <view class="weui-search-bar"><v ...
小程序搜索框简单的实现
我们先来看看小程序的官方文档现附上小程序官网链接https://developers.weixin.qq.com/miniprogram/dev/index.html 在搜索框中输入input(点击 ...
小程序搜索框组件，带历史记录和搜索推荐。
1.给input搜索框添加双向绑定v-model到keyword关键字,添加@input事件,当触发@input事件,发起搜索建议请求,参数包含keyword,将返回的列表添加到 data新建列表里, ...
微信小程序搜索框实现模糊查询
目录前言一.概述二.步骤三.效果展示总结前言主要实现功能,无美化,如需请自设一.概述开发工具:微信开发者工具通过对微信原生组件input绑定事件实现对已获取的列表元素模糊查询的操作 ...
微信小程序————搜索框获取本地缓存搜索记录
微信小程序获取本地缓存的搜索记录 html  //这里是搜索框 <view class="box_search">< ...
小程序搜索框_小程序直播有了搜索入口这波微信公域流量你要不要抓？
[亿邦动力讯]日前,微信"搜一搜"上线直达小程序直播功能.这意味着,微信小程序直播有了一个搜索入口. 亿邦动力体验发现,在微信"搜一搜"输入美妆品牌名称&quo ...
微信小程序搜索框自动补全功能
▶动态效果图◀ ▶效果涉及到的input属性◀ focus Boolean false 获取焦点 bindinput EventHandle ...

小程序---搜索框实现

xxx.wxml

xxx.wxss

xxx.js

小程序---搜索框实现相关推荐

最新文章

热门文章