实现步骤
1. 新建数据模型,其中字段“商品分类”作为顶部选项卡切换标签项。
2. 填充数据模型相关测试数据。
3. 在微搭编辑中使用布局组件。
4. 在布局组件-布局内容添加顶部选项卡组件,并设置顶部选项卡标签,其中选项标签名称分别对应“全部”、“啤酒”、“洋酒”、“白酒”,标签值分别对应“0”,“1”,“2”,“3”。
5. 在布局组件-布局内容添加数据列表组件,并设置筛选条件。
说明:
变量
currentType
为提前创建好的自定义文本型变量,默认为“0”。
数据筛选条件:商品名称等于任意一个数组元素:
$w.page.dataset.state.currentType
(表达式结果为数组类型)。6.
$w.page.dataset.state.currentType
解析如下。
$w.page.dataset.state.currentType=='0' //选择全部?['啤酒','洋酒','白酒']:[$w.page.dataset.state.currentType == '1' ? '啤酒' : '',$w.page.dataset.state.currentType == '2' ? '洋酒' : '',$w.page.dataset.state.currentType == '3' ? '白酒' : '']
7. 设置顶部选项卡组件切换事件,并设置变量赋值,将变量
currentType
的值设置为当前选项卡的标签值。
8. 顶部选项卡数据切换效果展示。