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

一、需求

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

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

二、思路与方案

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

三、实现过程

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

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

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

4、搜索控件添加

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

话不多说，上代码