哈咯~今天只做的是一个动态的高亮效果,为什么我们需要这个功能呢?为了更清晰的观察到筛选范围的区间内容,通常我们会在选择后高亮显示所选择的范围,能够让用户更加快速了解到选择范围在所有选项中的占比情况。在筛选员工的年龄、商品的价格、学生成绩等方面我们会较多使用到该效果。首先让我们一起来看一下效果图:
效果
![](https://i-blog.csdnimg.cn/blog_migrate/b6aee1f1a6f220fbdd8b893dd4138ce5.gif)
制作思路
数据筛选—通过数据选择输入框组件筛选数据范围
数据高亮显示—通过横向列表组件显示全部数据,再通过条件式容器的判断动态显示高亮数据
制作过程
第一步:创建数据模型
1、创建age表,并建立age字段,类型为整数,存储数据
![](https://i-blog.csdnimg.cn/blog_migrate/0627f6a97d19f564751f54dbdbe5c249.png)
第二步:后台添加数据1.需先更新后台,方可进入后台
2.可右上角点击create_object按钮,直接创建多个数据