小程序实现搜索框功能


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 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
微信小程序class封装http代码实例
Aug 24 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实现的Cookies操作类实例
2014/09/24 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
用jscript实现新建word文档
2007/06/15 Javascript
js 事件小结 表格区别
2007/08/13 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
微信小程序日历效果
2018/12/29 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
使用python加密自己的密码
2015/08/04 Python
Python 画出来六维图
2019/07/26 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
python requests证书问题解决
2019/09/05 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
网络工程师的自我评价
2013/10/02 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
小学毕业感言200字
2015/07/30 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书