微信小程序下拉框搜索功能的实现方法


Posted in Javascript onJuly 31, 2019

最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个。

首先看下效果图:

微信小程序下拉框搜索功能的实现方法

左边是输入框,可以进行模糊查询,右边图标进行选择。

代码部分,我定义了五个参数,和一个自定义的方法,

list:下拉框数组,

_width:组件宽度,
_height:组件高度,
bind:action: 自定义方法

考虑到每个人用的时候用的对象数组结构不同我预留了两个字段,做自定义(可不写),怎么样是不是很强大。

actualvalue:下拉框实际值,
showvalue:下拉框显示值

微信小程序下拉框搜索功能的实现方法

微信小程序下拉框搜索功能的实现方法

代码我发布到github了代码地址:https://github.com/ZhuifengJuvenile/hui-picker-input

总结

以上所述是小编给大家介绍的微信小程序下拉框搜索功能的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
javascript中undefined的本质解析
Jul 31 #Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 #Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 #Javascript
js实现一个简易计算器
Mar 30 #Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 #Javascript
JS获取动态添加元素的方法详解
Jul 31 #Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 #jQuery
You might like
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
php计算整个目录大小的方法
2015/06/19 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
python threading模块操作多线程介绍
2015/04/08 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python对html过滤处理的方法
2018/10/21 Python
利用python循环创建多个文件的方法
2018/10/25 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
Python笔记之代理模式
2019/11/20 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
opencv 阈值分割的具体使用
2020/07/08 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
美工的岗位职责
2013/11/14 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
小学语文复习计划
2015/01/19 职场文书
财务人员入职担保书
2015/09/22 职场文书
小学三年级作文之写景
2019/11/05 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python