stdf/doc/components/asyncPicker/guide.md

使用场景

AsyncPicker 组件使用场景类似于 Picker 多级联动，是为了解决下级数据根据上级数据从服务端查询的情况。例如：选择省级数据后，动态查询对应的市级数据，再选择市级数据后，动态查询对应的区级数据，以此类推。

使用方式

AsyncPicker 的使用对比 Picker 多级联动稍微有些复杂，因为数据不是一次性传入，而是通过接口动态获取，所以需要开发者自己处理数据。

通过监听 onnext 和 onprev 方法，更新当前列的新数据 data 并动态绑定至组件内部，同时需要动态绑定当前列是否是第一级 lastLevel，是否是最后一级 firstLevel。

当数据是最后一级时，右侧按钮会触发 onconfirm 方法，返回选定的数据；当数据不是最后一级时，右侧按钮会触发 onnext 方法，返回当前选定项的索引值。

返回数据

AsyncPicker 组件最终返回的数据有两项，一项是选定的多列数据组成的数组 items，另一项是选定的多列数据的索引组成的数组 indexs，请按照需求选择使用。

其中 items 每一项的数据结构与传入的数据结构一致，也方便开发者直接使用。

使用优化

实际开发中，多数情况下 AsyncPicker 的数据都是动态获取的，通常是通过接口获取，一般我们需要对传入的数据进行循环处理，以便于 AsyncPicker 组件能够正常使用。但这是一个比较繁琐且没必要的过程，因此 STDF 对 AsyncPicker 组件的入参做了一些优化，使得开发者可以直接传入接口返回的数据，而不需要做循环处理。

• 可以通过动态绑定每次数据的 labelKey，自定义传入的每列数据 label 属性名，如果不传入则默认使用 'label'，请参考示例。

说明

AsyncPicker 是在 Popup 基础上封装的，通过预先定义一些 Popup 的 Props 实现，因此可以通过传入 Popup 的属性来实现不同的效果。比如示例中通过设置 popup 的 radius 改变圆角风格。

AsyncPicker 内加载数据时显示的 loading 是在 Loading 组件基础上封装的，可以通过传入 Loading 的属性来实现不同的效果。比如示例中通过设置 loading 的一些参数换了一个 loading 效果。

Radio、ActionSheet、IndexBar、Picker、AsyncPicker 区别

Radio、Checkbox、ActionSheet、IndexBar、Picker、AsyncPicker 组件本质都是给出一系列数据，让用户进行数据选择或执行一些操作，但在使用上有一些区别：

• Radio 一般用于单选数据，数据量固定且较少，需要在 UI 界面上直接展示选项，方便用户在界面交互时对备选数据有个概览，比如性别选择。
• Checkbox 使用场景类似 Radio，但是可以多选。
• ActionSheet 一般用于选择之后立即执行一些操作，选项固定且较少，但不需要在 UI 界面上直接展示选项，比如做一些删除、修改等操作。
• IndexBar 一般用于选择单条数据，数据量非常大的动态数据，且已经对数据进行了分类索引，一般会用整个页面来展示。
• Picker 一般用于选择单条或多条数据，数据量较大或无法确定长度的动态数据，或用于一些联动数据的选择。无论是否联动，数据在传入时已经是确定的。
• AsyncPicker 一般用于选择多条数据，下级数据是根据上级数据动态获取的，比如服务端接口单次只返回一级数据，需要根据用户选择的一级数据再次请求接口获取下级数据。