一、场景示例

输入框下是可选的城市列表，点击选择之后，选择视图中会返回一个保存有城市id的数据。后面可以用来修改表数据也可以用来作为筛选条件（非常常用的功能）

二、基本介绍

选择视图可以简单理解成具有点击选择功能的列表。点击列表中一个项的时候，这个项就被”选择”了。“选择”的意思是返回了一个数据，可以用来修改其他表的数据或者用来筛选（筛选也是选择视图非常常见的场景）。

所以，选择视图绑定的数据和列表相似，需要绑定一个列表。每一个选项对应列表中的一个项，所以选项的呈现需要选择项数据中一个字段。

三、主要混淆点

1. 数据呈现和数据选择

在我刚开始接触选择视图的时候，最容易混淆的点是 关于选择视图的数据呈现和数据选择。

• 数据呈现指的是你在手机上看到的信息。
• 数据选择指的是当你选择的时候，被选中的信息是整条数据的记录。

比如我这里city这个选择视图的设置。我的每个单元格里显示的是城市的名字。

但是当点击选择的时候，实际上你可以获得整条记录。
但是在使用选中的数据时只能选择对应数据类型的字段。

2. 默认值

而如果要使用默认值，需要在先选择字段。比如我在城市这个选择视图里设置“选择哪个字段”的时候，如果我设置了城市列表中的city字段，那我的默认值就应该使用city字段的数据。反之，如果这里我设置的是id，默认值就应该使用id数据。

3. UI调整

可以将选择视图看成，列表的每一项由一个条件式容器，条件式容器有选中和未选中两个状态。因此我们想要让选择视图的背景成透明色，需要调整内外两侧的容器背景。

• 外侧背景颜色

• 内侧背景颜色

选择视图的两个状态时不同的容器，需要讲选中视图和正常视图的背景都设置成透明，整个选择视图的背景才是透明的。

为了更直观一点，我这里试着将内外两侧的背景颜色调成不同的。方便大家理解

4. 选中时切换

有时候我们想要选中选项时执行某个行为，最开始的时候会这种想法“选中时执行某个动作，那这个动作就应该添加在选中视图中的按钮里”。这样设置之后你会发现，当你选中后不会有相应的动作，但是当你再次点击选中的按钮时就会触发设置的行为了。

那如何在点击选项时就触发行为，而是蠢蠢的选中后再次点击才执行动作呢？

这时的动作应该添加在「选择视图」中

仔细看会发现，这时行为添加的时间点是「项点击时行为」，也就是点击选择视图某一项时出发的行为。在这里进行行为的添加就能够实现，点击选项就触发对应的行为。

四、难点：

多选

选择视图可以设置多选功能，但是多选的话，需要注意的是返回的值不是单值，而是一个列表。如果是用来在当前页面做筛选功能，在过滤条件里可以选择“包含”。

如果需要将数据传递到其他页面。需要用能够承接列表的数据来承接，比如页面数据、全局数据：打开最底下的“是列表”按钮就可以用来承接列表数据了。

补充 选择视图多选后如何跳转

示例：

介绍

基于简单跳转，我们通过增加链接数据实现针对性跳转，如在场景为「选择某城市某行业」后点击「查询」，通过链接数据在跳转页筛选出「该城市该行业的公司信息」。

但是，我们更多的场景是「希望筛选出杭州、北京、上海的运营岗、产品岗」的公司信息。

即「如何多选后进行带参数跳转」

核心步骤

本质上讲，解决这个问题的方式就是如何传递一个「数组」，以「城市为例」

1. 确保选择视图处于多选状态
2. 页面全局模式下，添加参数，且为列表类型

3. 当选择视图被点击时触发设置全局数据，将绑定在该选择视图上的数据模型字段赋值到对应全局数据上

4. 此时展示页中的列表仅需过滤出城市名称被包含在全局数据/城市中的数据

题外话

• 有可能我们想筛选的除了城市以外，还有行业。

  • 那就以同样的方式添加一个新的全局数据，在过滤条件时添加一条「行业包含于全局数据/行业」

• 如果只选择了「城市」，但未选择「行业」，可以展示满足「城市」的所有公司信息吗？

  • 可以，方法如下：

「展示页」中，添加远程数据，在远程数据成功获取时，添加条件判断，如果此时全局数据集合非空，即直接展示全局数据中内容，如果此时全局数据集合为空，就需要先将远程数据赋值给全局数据。

1. 设置「列表为空」时条件

2. 设置「列表为空」时行为：设置全局数据

3. 设置「列表非空」时条件

4. 设置「非空条件」时行为：设置全局数据为全局数据