选择视图 - 关注点

🧑🏻‍💻 中国 - 佛山市 - 贞观

一、场景示例

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

二、基本介绍

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

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

三、主要混淆点

1. 数据呈现和数据选择

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

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

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

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

2. 默认值

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

3. UI调整

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

  • 外侧背景颜色
  • 内侧背景颜色

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

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

这里,整个选择视图的背景是绿色的,选中视图的背景是橙色的,而正常试图的背景则是紫色的。这三个地方都是可以设置背景的。

4. 选中时切换

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

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

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

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

四、难点:

多选

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

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

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

示例:

介绍

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

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

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

核心步骤

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

  1. 确保选择视图处于多选状态
  2. 页面全局模式下,添加参数,且为列表类型
  1. 当选择视图被点击时触发设置全局数据,将绑定在该选择视图上的数据模型字段赋值到对应全局数据上
  1. 此时展示页中的列表仅需过滤出城市名称被包含在全局数据/城市中的数据

题外话

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

    • 那就以同样的方式添加一个新的全局数据,在过滤条件时添加一条「行业包含于全局数据/行业」
  • 如果只选择了「城市」,但未选择「行业」,可以展示满足「城市」的所有公司信息吗?

    • 可以,方法如下:

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

  1. 设置「列表为空」时条件
  1. 设置「列表为空」时行为:设置全局数据
  1. 设置「列表非空」时条件
  1. 设置「非空条件」时行为:设置全局数据为全局数据
2022-11-18
4 0