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


Posted in Javascript onJuly 31, 2019

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

首先看下效果图:

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

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

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

list:下拉框数组,

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

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

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

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

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

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

总结

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

Javascript 相关文章推荐
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
jQuery实现跨域
Feb 03 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
angular select 默认值设置方法
Jun 23 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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绘制在图片上的正余弦曲线
2013/06/08 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
django-csrf使用和禁用方式
2020/03/13 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
校本教研工作制度
2014/01/22 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
体育教学随笔感言
2014/02/24 职场文书
卖房协议书
2014/04/11 职场文书
学校搬迁方案
2014/06/15 职场文书
助学感谢信范文
2015/01/21 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL