。

在订水商城业务中可以按照分类查询商品信息#xff0c;这就涉及到数据源的拆分。

我们在数据源的设计中区分为主子表#xff0c;主表呢存储唯一的记录#xff0c;子表的记录可以重复#xff0…上一篇我们介绍了跑马灯的功能这一篇就进入到我们的主体部分开发。

在订水商城业务中可以按照分类查询商品信息这就涉及到数据源的拆分。

我们在数据源的设计中区分为主子表主表呢存储唯一的记录子表的记录可以重复子表的信息和主表进行关联。

微搭中对于这种主子表业务的在数据源设计时需要建立关联关系我们来先讲解一下数据源的设计。

数据源搭建

主子表业务的先需要创建主表的信息我们打开控制台点击数据模型点击新建

点击编辑添加字段先添加分类名称

分类添加好之后我们添加子表子表的创建方式是相同的名称输入订水商城商品信息先添加一个商品名称字段类型选择文本

再添加价格字段类型选择数字

数据源添加好了之后就可以继续开发我们的首页了在开发之前我们先录入测试数据。

打开应用添加宫格导航组件

$w.category.data.records.map(item({icon:

自定义图片,

这段代码是在JavaScript中使用数组的map方法和箭头函数对w.category.data.records数组中的每个元素进行处理并返回新的数组。

具体来说map方法是数组的一个方法用于创建一个新数组其结果是该数组中的每个元素都调用一个提供的函数后的返回值。

在这个例子中该函数是一个箭头函数它接收item作为参数并返回一个新的对象。

“icon”:

})。

箭头函数没有自己的this值它继承自父执行上下文。

如果函数体中没有包含this关键字则使用父级执行上下文的this值。

“icon”:

item.fltb创建一个键为iconSrc值为item.fltb的新对象。

这里假设item.fltb是存在的。

“title”:

item.flmc创建一个键为title值为item.flmc的新对象。

这里同样假设item.flmc是存在的。

“tapStatus”:

所以这段代码的结果是一个新的数组数组中的每个元素都是一个对象这个对象有四个属性“icon”、“iconSrc”、“title和tapStatus”。

其中“icon的值总是自定义图片”而其他三个属性的值分别来自原始数组的对应元素。

我们本篇带着大家实现了一下宫格导航的功能先需要创建变量用来获取数据然后在数据绑定的时候按照格式要求重新进行组装。

在微搭中组件的数据绑定时重新组装数据是非常常见的主要还是要熟悉javascript的语法这样就可以做到应用自如。