小程序实现搜索框功能


Posted in Javascript onMarch 26, 2020

本文实例为大家分享了小程序实现搜索框功能的具体代码,供大家参考,具体内容如下

实现效果图:

小程序实现搜索框功能

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

更多搜索功能实现的精彩文章,请点击专题:javascript搜索功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
iview的table组件自带的过滤器实现
Jul 12 #Javascript
es6中比较有用的7个技巧小结
Jul 12 #Javascript
echarts大屏字体自适应的方法步骤
Jul 12 #Javascript
javascript实现简易聊天室
Jul 12 #Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 #Javascript
小程序实现短信登录倒计时
Jul 12 #Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 #Javascript
You might like
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
php分页示例分享
2014/04/30 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
php获取远程文件大小
2015/10/20 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
javascript的几种写法总结
2016/09/30 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
js实现搜索栏效果
2018/11/16 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python提取内容关键词的方法
2015/03/16 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
python实现汉诺塔算法
2021/03/01 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
利用python 读写csv文件
2020/09/10 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
自荐信模版
2013/10/24 职场文书
学生处主任岗位职责
2013/12/01 职场文书
教师个人鉴定材料
2014/02/08 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
会议开幕词
2015/01/28 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
就业证明函
2015/06/17 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python