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


Posted in Javascript onJuly 31, 2019

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

首先看下效果图:

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

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

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

list:下拉框数组,

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

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

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

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

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

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

总结

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

Javascript 相关文章推荐
jquery 指南/入门基础
Nov 30 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
js constructor的实际作用分析
Nov 15 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
javascript中expression的用法整理
May 13 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
vue devtools的安装与使用教程
Aug 08 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
图形数字验证代码
2006/10/09 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
浅谈Python peewee 使用经验
2017/10/20 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
python匿名函数用法实例分析
2019/08/03 Python
python conda操作方法
2019/09/11 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
大学生水文观测实习自我鉴定
2013/09/29 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
爱心捐书倡议书
2015/04/27 职场文书
起诉书格式范文
2015/05/20 职场文书
信仰观后感
2015/06/03 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
行政处罚事先告知书
2015/07/01 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
Python集合set()使用的方法详解
2022/03/18 Python