关键词：单据列表、搜索框

一、需求

在这篇文章中，我将给大家展示移动端的单据列表的设计和模糊查询的实现

场景： 我们在设计移动端的单据列表过程中可能会遇到，系统默认给的单据列表模板样式很单一而且不好拓展其他功能，并且不好进行页面跳转等一系列下面的操作

二、思路与方案

下面我为大家介绍一种简单的移动列表的设计，成品图就在文章头

三、实现过程

1、我们进入苍穹新建一个移动端的空白表单，这里要注意，不是移动布局也不是用模板，只是简单空白页

2、进入设计器，我们添加一个单据列表控件，这里注意如果怕页面布局不完美可以先添加一个flex面板，再在里面添加单据列表控件，然后绑定单据实体为我们的目标单据，这里我选择了我的采购申请单，我们也可以在线添加工具栏，工具栏的操作在插件中是监听click事件来捕获的

3、然后选中我们添加的单据列表中的卡片-添加卡片列表字段-绑定对应的字段映射关系，这里注意想要有优雅的卡片样式，要擅用卡片布局容器，这个容器在卡片的定位就类似单据中的flex面板，这样我们就可以对不同的字段排列它对应的位置、样式等。

4、搜索控件添加

5、移动的搜索控件的使用类似于pc端，但是不同的是要实现MobileSearchTextChangeListener 监听搜索框的输入，它还有其他两个实现可以在想要使用的场景选择使用MobileSearchInitListener，MobileSearchFocusListener会在不同时机进入对应实现方法，这里我使用的是MobileSearchTextChangeListener 搜索框输入文字后触发

话不多说，上代码

实现click方法，这里我进行了两个字段的模糊查询，当输入文字后对列表进行模糊筛选，分别是申请人名字和申请组织名，筛选完刷新列表

实现setFilterListener接口，为billlist注册监听，在setFilter方法获取到text（可以通过缓存等方式），再对filter添加qfilter

实现后的效果，达到筛选效果

四、效果图

页面元数据与插件代码已经添加到附件，感兴趣的小伙伴可以自己试一试

五、开发环境版本

2.0及以上

六、注意事项

版本问题。4.0版本可能有些功能已经实现，或者不在支持，建议自己实践一下

七、参考资料

开发平台

学习成长中心

创作不易，如果大家觉得有帮助，请动动您的金手指点赞鼓励一下，非常感谢。【emoji】