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


Posted in Javascript onJuly 31, 2019

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

首先看下效果图:

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

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

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

list:下拉框数组,

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

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

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

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

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

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

总结

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

Javascript 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 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基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
用javascript实现点击链接弹出"图片另存为"而不是直接打开
2007/08/15 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
python 实现表情识别
2020/11/21 Python
python excel和yaml文件的读取封装
2021/01/12 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
亲属关系公证书样本
2015/01/23 职场文书
给领导敬酒词
2015/08/12 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫