今天为大家分享我做的一个宫格式导航。宫格式导航被广泛应用于各平台系统的中心页面,我们经常用的支付宝、美图秀秀等app是用的这个样式的导航来完成交互。这种导航主要使用于独立、无功能交叉、切换不频繁的程序功能,宫格式页面导航从视觉呈现上看分类清晰、风格简约,在应用中很常见。下面先来看一下制作的效果:
![](https://i-blog.csdnimg.cn/blog_migrate/b0d2d0b2f5eda68b6dc4ff323887bc49.gif)
制作思路
创建数据模型-》导航页中列表绑定分类数据-〉商品页中列表绑定商品数据
商品页设置「链接数据」-》商品页中列表设置「过滤条件」,即「所属分类 等于 链接数据」
导航页中列表的具体项目设置「行为-跳转」-》设置跳转时候的链接数据为分类数据的名称
制作过程
第一步 创建数据模型
![](https://i-blog.csdnimg.cn/blog_migrate/baa0653097b4d5357c8fc0da9eac1f27.png)
第二步 设置导航页面的列表样式及数据绑定
样式:设置四列
![](https://i-blog.csdnimg.cn/blog_migrate/4b61ba2db98330a1cb074b49133a5cf1.png)
数据:绑定「远程数据-分类列表」
![](https://i-blog.csdnimg.cn/blog_migrate/a6ca2b8f63c2c65d5f04407b049a2303.png)
第三步 商品页中列表绑定商品数据
![](https://i-blog.csdnimg.cn/blog_migrate/b96d907958ea22aa3252e59535d59b8e.png)
第四步 商品设置链接数据
![](https://i-blog.csdnimg.cn/blog_migrate/993fb91a2988f975379ef78f31ce20c7.png)
第五步 修改商品列表的过滤条件
![](https://i-blog.csdnimg.cn/blog_migrate/bf99dc9a99556dfdbaca4c4a9a266a25.png)
第六步 设置跳转行为
![](https://i-blog.csdnimg.cn/blog_migrate/d6d180ad646b779625ba220f95a772f9.png)