08｜无代码开发 ｜ 如何使用Zion实现宫格式导航

今天为大家分享我做的一个宫格式导航。宫格式导航被广泛应用于各平台系统的中心页面，我们经常用的支付宝、美图秀秀等app是用的这个样式的导航来完成交互。这种导航主要使用于独立、无功能交叉、切换不频繁的程序功能，宫格式页面导航从视觉呈现上看分类清晰、风格简约，在应用中很常见。下面先来看一下制作的效果：

制作思路

• 创建数据模型-》导航页中列表绑定分类数据-〉商品页中列表绑定商品数据

• 商品页设置「链接数据」-》商品页中列表设置「过滤条件」，即「所属分类 等于 链接数据」

• 导航页中列表的具体项目设置「行为-跳转」-》设置跳转时候的链接数据为分类数据的名称

制作过程

第一步 创建数据模型

第二步 设置导航页面的列表样式及数据绑定

样式：设置四列

数据：绑定「远程数据-分类列表」

第三步 商品页中列表绑定商品数据

第四步 商品设置链接数据

第五步 修改商品列表的过滤条件

第六步 设置跳转行为