手机版

小程序实现搜索框功能

时间:2021-08-21 来源:互联网 编辑:宝哥软件园 浏览:

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

实现效果图:

xxx.wxml

!-搜索框-view class=' weui-search-bar ' view class=' weui-search-bar _ _ form '!-点击之后,出现投入框-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 } } ' bind input=' InputTypeing '/!-输入款字数大于0,则显示清除按钮-view class=' weui-icon-clear ' wx : if=' { { input val。length 0 } } ' bind tap=' clearInput '图标类型=' clear ' size=' 14 '/图标/视图/视图!-没点击之前,只是一些文字和图标-label class=' weui-search-bar _ _ label ' hidden=' { { inputshow } } ' bind tap=' showInput ' icon class=' weui-icon-search ' type=' search ' size=' 14 '/icon view class=' weui-search-bar _ _ text '搜索/视图/标签/视图!-动态出现的"取消"键-view class=' weui-search-bar _ _ cancel-BTN ' hidden=' { {!输入显示} } "绑定点击="隐藏输入"取消/view/viewxxx.wxss。weui-search-bar {位置:相对;padd : 8px 10px display :-web套件-盒子;display :-web套件-flex;显示: flex盒子尺寸:边框盒子;背景-color : # efef 4;边框-top: 1rpx实心# D7D6DC边框-bottom: 1rpx实心# D7D6DC}。weui-icon-search { margin-right : 8px;字体大小:继承;}.weui-icon-search _ in-box { position : absolute;left: 10pxtop: 7px }。weui-search-bar _ _ text { display : inline-block;font-size : 14px垂直对齐: 中间;}.weui-search-bar _ _ form {位置:相对;-web套件-box-flex : 1;-web套件-flex : auto;flex:汽车;边界半径: 5px背景: # FFFFFFborder: 1rpx固体# E6E6EA}。weui-search-bar _ _ box {位置:相对;左填充左: 30px填充-右侧: 30px宽度: 100%;盒子尺寸:边框盒子;z-index : 1;}.weui-search-bar _ _ input { height : 28px;线高: 28pxfont-size : 14px}.weui-icon-clear {位置:绝对;top : 0;右: 0;padd : 7px 8px font-size : 0;}.weui-search-bar _ _ label { position : absolute;top : 0;右: 0;底部: 0;左: 0;z-index : 2;边界半径: 3px文本对齐:中心;color : # 9b9b 9 bbbackground : # FFFFFF线高: 28px}.weui-search-bar _ _ cancel-BTN { margin-left : 10px;线高: 28pxcolor : # 09bb 07 white-space : nowrap;font-size : 30 rpx}xxx.js

showInput:函数(){这个。setdata({ inputshoutd : true });},隐藏输入:函数(){ this.setData({ inputVal: ' ',input Howe d : false });//getList(这个);},clearInput:函数(){这个。setdata({ input val : ' ' });//getList(这个);},输入类型:函数(e) { //搜索数据//getList(这个,e . detail。值);这个。setdata({ inputval : e . detail。value });}更多搜索功能实现的精彩文章,请点击专题:javascript搜索功能汇总进行学习

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

版权声明:小程序实现搜索框功能是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。