uniapp实现下拉搜索选择框，app，h5可用-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp实现下拉搜索选择框，app，h5可用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在通过uniapp做app开发的时候，有场景需要用到下拉选择框，但是使用的uview框架里的底部弹出的选择项形式产品又不满意。。。于是在uniapp插件市场上搜索了一番，最终发现了一款还可以的，主要是拓展性比较好的一个。在插件市场上的插件id：cuihai-combox。文档地址：下拉搜索选择组合框
然后话不多说先上效果图，以下是插件本身的示例图：
uniapp下拉选择框,安卓,javascript,前端,开发语言,android,web app

uniapp下拉选择框,安卓,javascript,前端,开发语言,android,web app

我个人实现的例子：

代码实现如下，实现的例子是不带搜索的，但是实际组件支持搜索功能：

<combox-search label="部门查询" labelWidth="100px" emptyTips="无匹配选项" :candidates="candidates"
						:isDisabled="true" placeholder="请选择部门" @getValue="getValue($event)"></combox-search>

// 部门下拉数据源
				candidates: ['部门1', '部门2', '部门3', '部门4'],

// 获取弹出框选择的部门
			getValue(e) {
				console.log(e);
			},

PS:但是组件用起来有些地方要注意下：
（1）如果是在app上使用控件的搜索功能，会出现下拉选项和手机键盘一起弹出的情况，这样会导致一个问题，如果控件位置在手机偏底部的时候，弹出的软键盘会遮住下拉选项，这个需要开发者自己去做处理。
（2）目前该控件显示下拉选项的点击事件写在了右侧三角形箭头上，建议开发者们改为在编辑框上。
（3）如果在插件市场上直接点击”使用HBuilderX导入插件“的话，导入的插件还报少一个图片资源的问题，需要下载完整源码，在里面找到缺少的图片资源文件复制到自己项目中去，或者自己找一个也行。

总结：虽然插件有些许小问题，但是个人感觉总体还是可以的，自己改造改造轮子让其更适应自己的开发就好。希望能够帮到大家！文章来源地址https://www.toymoban.com/news/detail-663607.html

到了这里，关于uniapp实现下拉搜索选择框，app，h5可用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！