哈咯～今天只做的是一个动态的高亮效果，为什么我们需要这个功能呢？为了更清晰的观察到筛选范围的区间内容，通常我们会在选择后高亮显示所选择的范围，能够让用户更加快速了解到选择范围在所有选项中的占比情况。在筛选员工的年龄、商品的价格、学生成绩等方面我们会较多使用到该效果。首先让我们一起来看一下效果图：

效果

制作思路

• 数据筛选—通过数据选择输入框组件筛选数据范围

• 数据高亮显示—通过横向列表组件显示全部数据，再通过条件式容器的判断动态显示高亮数据

制作过程

第一步：创建数据模型

1、创建age表，并建立age字段，类型为整数，存储数据

第二步：后台添加数据

1.需先更新后台，方可进入后台

2.可右上角点击create_object按钮，直接创建多个数据

3.可右上角导入按钮，批量导入相关数据

第三步：数据筛选配置

1.UI设置

2.请选择范围—文本组件

3.上限和下限的选择—数据选择输入框

1、创建页面数据

1.创建两个页面数据，命名为left和right，类型为整数

2.我们需要对上下限的数据选择器的内容进行限制，且左右两个数据选择器的范围互为过滤条件，设置left和right分别用来保存左右两个数据选择器选择的数据。

2、数据选择输入框的配置 以左侧下限_数据选择器为例：左侧的数据选择输入框确定的是高亮范围的最小值，因此他的数值需要比右侧的（数据选择输入框）数据小，又由于上限_数据选择输入框的值将赋值给页面数据right，即过滤条件为age小于等于页面数据right。

1.修改数据类型为远程数据，选择age表

2.过滤条件为 age 小于等于 页面数据/right

3.排序字段为age 升序排序

4.显示的列表字段为age，默认值为页面数据/left

3、配置数据选择输入框的行为 由于左右两个数据选择器的范围互为过滤条件，在下限_数据选择器选择完最小值后，需要为“下限_数据选择器”添加行为“设置页面数据”，将选择的值赋值给页面数据/left 1.选择数据选择输入框的交互栏，添加改变时行为—设置页面数据 2.将下限_数据选择输入框的值赋值给left，上限_数据选择输入框的值赋值给right tips：上限_数据选择输入框的配置与下限类似

●过滤条件——age大于等于页面数据left

●默认值：页面数据/right

第四步：横向列表配置 1、UI搭建

2.数据绑定

i、数据来源选择age表

ii、为了让每一个年龄都能在横向列表中占据一项，过滤条件将选为“无过滤条件”

iii、排序方式选择age字段，升序排序

第五步：条件式容器配置 1、添加状态 通过分析可得，也就是我们可以将横向列表中的内容的呈现状态分为：被选择，未被选择。其中被选中的部分可再分为：两端和中间，区别在两端的内容可用明显符号标注，中间只需要高亮。 即横向列表的内容需有三种状态： 未被选择、被选中：两端和被选中：中间

2、不同状态下添加组件 i、未选择的数据即为阴影状态，颜色为浅灰色（直接复制高亮_视图即可）显示age字段

ii、被选择的上下限数据即为两侧状态，颜色为亮色且显示选择的上下限age数值

iii、被选择的中间范围数据即为中间状态，颜色为亮色，显示age字段 age字段显示——文本组件 高亮块——视图组件

3、设置条件 i、未被选择（状态名称：阴影）

●右侧未被选择的年龄为该项的数据比上限_数据选择器的值大

●左侧未被选择的年龄为该项的数据比下限_数据选择器的值小 两个条件以满足其中一个即可，使用“或条件”连接两个条件。

ii、被选择1（状态名称：两端）

●左侧被选择的年龄为该项的数据等于下限_数据选择器的值

●右侧被选择的年龄为该项的数据等于上限_数据选择器的值 两个条件以满足其中一个即可，使用“或条件”连接两个条件。

iii、被选择2（状态名称：中间） 中间的内容，无需设置条件

4、文本组件设置 1需显示年龄数据，具体数据为该项数据中的“age”字段的值。 显示年龄的文字组件在视图组件中，需双击点进入视图组件后对文字组件的数据绑定，配置方式如下所示：