01 组件说明

在这里插入图片描述

宫格导航组件可以在导航配置里设置菜单，可以手动添加，也可以变量绑定

因为我们一般的分类是动态变化的，品类会不断的调整，如果每次调整了品类就需要修改代码，而且还得发布新版本，未免不太方便。

本节我们介绍一下如何动态的配置菜单

02 创建数据源

动态配置菜单的意思是从数据源中读取记录，然后将数据绑定到组件上。登录控制台，点击新建数据模型

在这里插入图片描述

输入数据源的名称，服务分类

在这里插入图片描述

添加三个字段，分类名称、序号、图标

在这里插入图片描述

在列表上点击管理数据，添加测试数据

在这里插入图片描述

03 创建变量

数据源配置好之后，我们要定义变量来读取数据。点击变量，点击新建变量，新建一个对象类型的变量，从数据源中读取

在这里插入图片描述

04 数据绑定

变量配置好了之后，我们绑定数据，将导航设置的类别清空，点击数据绑定的图标

在这里插入图片描述

使用表达式绑定，输入如下代码

$page.dataset.state.classify.records.map((item, index) => {
    return {
        title: item.flmc,
        iconSrc: item.tb,
        tapStatus: "inside",
        insideUrl: '',
        withParams: true,
        params: [
        ],
        icon: '自定义图片'
    }
})