【新版编辑器】动态分类 - 教程

咫尺_bear

观看此功能视频链接请点击：http://school.jisuapp.cn/courses/151-18.html

一、动态分类定义

“动态分类”组件可以展示电商、到店、应用数据等信息，与其他组件不同的是，它有多种展示样式可供选择

类型：一级横版、一级大图、一级竖版；二级横版、二级大图、二级竖版

注：web端只做样式预览，未做功能，如果需要查看功能效果，请打包后再查看

二、组件优点

①动态化组件，只需添加少数组件，即可展示大量内容

②小程序上线后，后台可直接修改内容，线上即同步更新（修改内容无需重新打包）

③使用该组件展示的内容，在打包时不会影响到代码包大小

④多种组件样式可供选择

⑤可调用展示：电商、到店、应用数据、门店、多商家等信息

三、动态分类使用教程
1.添加动态分类

（1）进入【编辑页面】-【组件库】-【布局】-【动态分类】，添加动态分类组件

（2）打开模板库，如下图，动态分为分为六大类，分别是：一级横版、一级大图、一级竖版；二级横版、二级大图、二级竖版，选择需要的分类，第一个默认是空白模板

空白模板：是指只有分类，列表没样式的模板

2.一级横版

（1）添加一级横版到编辑器，根据需求选择分类样式、列表样式

（2）动态分类列表设置

在动态分类组件下添加一个自由面板，在自由面板添加图片组件、三个文本组件

（3）选择数据来源（电商/其他数据）

（4）设置分类数据

【分类设置】：指的是绑定数据，此分为两种方式，一种是绑定分类组，一种是自定义分类

【绑定分类组】：针对电商、预约、到店、应用数据等数据来源，后台有对分类进行组管理的，可以直接绑定分类组，绑定某个组之后，则展示该组下的所有分类，以及对应分类下的所有数据

【自定义分类】：根据数据来源（电商、预约、到店），将会展示后台所有的分类数据，可以自动选择所需要的分类，选择了分类之后，将会自动显示该分类下后台绑定的商品数据

（5）对动态分类添加的组件绑定对象

选中组件，开启【绑定对象】，选择对应的字段，如选中图片组件，绑定”商品图片“

选择文本组件，开启【绑定对象】，选择对应的字段，绑定”商品标题“；

依次绑定价格、销量

注：电商、预约、到店、视频等都有固定的字段供选择，不需要自主新增；但是应用数据没有写死的字段供选择，应用数据需要自主创建字段，创建流程：

http://bbs.zhichiwangluo.com/thread-18062-1-1.html

创建完之后，其他绑定流程都是一样的

（6）根据需要可以对列表设置附加组件（包括搜索、排序、定位等）

添加搜索组件：直接添加搜索组件到编辑器，对于电商、预约、到店、视频、门店、多商家等支持对所有的字段进行搜索；如果绑定的是应用数据，则需要自己进行设置根据哪个字段进行搜索

在后台设置应用数据对象的字段时，对该字段开启了必填项、排序项、搜索项，将会根据这个搜索、排序

添加排序组件：添加排序组件到编辑器

需要根据什么进行排序，可以找到对应的排序组件进行设置，如下图：

名称输入为商品标题、选择排序顺序是升序还是倒序，及根据什么字段进行排序

（7）设置列表高度

分为3种：

自定义高度：指的是设置一定的高度，列表数据只能在该高度内滚动

自适应高度：指的是不管数据有多少，根据设置每次加载的数据条数进行加载；其分为点击加载和滚动加载（点击加载：点击某个文案进行加载数据；滚动加载：滚动列表就可以加载数据）

自定义条数：对该列表设置条数，在该列表只展示设置的条数

（8）对分类设置样式

（9）全部设置完了之后，可以查看效果

注：后台添加了多少条数据，则在小程序中将会显示多少条数据

后台添加的商品数据：

3.一级竖版

（1）添加组件到编辑器，支持更换模板

（2）样式设置和在动态分类中添加组件的流程和一级横版是一样的

（3）分类设置，选择数据来源，可以绑定分类组/自定义分类，和一级横版一样

（4）组件样式设置

4.一级大图

（1）添加一级大图到编辑器，支持更换模板

（2）列数设置：指的是每一行显示多少个

上下结构：指的是图标和文字的排版是上下结构

左右结构：指的是图标和文字的排版是左右结构

（3）分类设置，选择数据来源，选中某个数据来源时，后面将会有一个管理，点击【管理】将可以跳转到对应的后台界面去添加数据

（4）组件样式

（5）一级大图绑定数据后，只要选中某个分类，就会跳转到该分类下的数据列表中，默认绑定了，点击大图分类直接跳转到下图列表

5.二级横版

（1）添加二级横版到编辑器，支持更换模板

（2）列表支持自定义列表样式，和一级横版类似

（3）根据需要对二级横板可以添加附加功能，操作和一级横版类似

（4）组件样式设置

6.二级竖版

（1）添加二级竖版到编辑器，支持更换模板

（2）在动态分类上添加组件，制作列表样式的流程和一级横版类似

（3）设置组件样式

（4）效果图：

7.二级大图

（1）添加分类组件到编辑器，支持更换模板

（2）选择数据来源，操作和一级大图类似

（3）设置组件样式

8.收藏为模板

点击【收藏为动态分类模板】，输入模板名称、模板预览图、权重，点击【确定】，将此默认保存，保存后，可到“我的”模板处查看

9.模板管理

模板库的模板仅供使用，自己收藏的模板将会到”我的“模板下，支持对自己收藏的模板进行分类

观看此功能视频教程请点击：http://school.jisuapp.cn/courses/151-18.html

wazalf

为啥预览看不到内容  开发板预览也是看不到 空白  已经绑定后台数据 请指导下 感谢

15060006460

预约可以实行动态分类吗？

咫尺_bear

15060006460 发表于 2018-7-29 20:24
预约可以实行动态分类吗？

您好，目前还不行

大王叫我来巡山

太麻烦了

大王叫我来巡山

为什么不能直接添加高级列表，非得先添加个自由面板，再添加图片和文字呢？？搞不懂