动态分类组件教程

一、动态分类定义

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

类型:一级横版、一级大图、一级竖版;二级横版、二级大图、二级竖版

注: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

留下评论?

你需要 登录 才能发表评论.