uniapp实现下拉搜索选择框,app,h5可用

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

uniapp实现下拉搜索选择框,app,h5可用_第2张图片


 我个人实现的例子:
uniapp实现下拉搜索选择框,app,h5可用_第3张图片


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

<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导入插件“的话,导入的插件还报少一个图片资源的问题,需要下载 完整源码,在里面找到缺少的图片资源文件复制到自己项目中去,或者自己找一个也行。

 总结:虽然插件有些许小问题,但是个人感觉总体还是可以的,自己改造改造轮子让其更适应自己的开发就好。希望能够帮到大家!

你可能感兴趣的:(安卓,javascript,前端,开发语言,android,web,app)