找回密码
 立即注册

扫一扫,访问微社区

查看: 37929|回复: 6

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

  [复制链接]

5

主题

1

回帖

2100

金钱

版主

积分
0
发表于 2018-7-19 16:47:54 | 显示全部楼层 |阅读模式
观看此功能视频链接请点击:http://school.jisuapp.cn/courses/151-18.html

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

动态分类.gif

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

图片38.png
图片39.png

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

二、组件优点
动态化组件,只需添加少数组件,即可展示大量内容
小程序上线后,后台可直接修改内容,线上即同步更新(修改内容无需重新打包)
使用该组件展示的内容,在打包时不会影响到代码包大小
多种组件样式可供选择
可调用展示:电商、到店、应用数据、门店、多商家等信息

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

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

图片40.png

2)打开模板库,如下图,动态分为分为六大类,分别是:一级横版、一级大图、一级竖版;二级横版、二级大图、二级竖版,选择需要的分类,第一个默认是空白模板
空白模板:是指只有分类,列表没样式的模板

图片41.png

2.一级横版

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

图片42.png

2)动态分类列表设置
动态分类组件下添加一个自由面板,在自由面板添加图片组件、三个文本组件

图片43.png

3)选择数据来源(电商/其他数据)

图片44.png
图片45.png

4)设置分类数据
分类设置:指的是绑定数据,此分为两种方式,一种是绑定分类组,一种是自定义分类
绑定分类组:针对电商、预约、到店、应用数据等数据来源,后台有对分类进行组管理的,可以直接绑定分类组,绑定某个组之后,则展示该组下的所有分类,以及对应分类下的所有数据
自定义分类:根据数据来源(电商、预约、到店),将会展示后台所有的分类数据,可以自动选择所需要的分类,选择了分类之后,将会自动显示该分类下后台绑定的商品数据

图片46.png

5)对动态分类添加的组件绑定对象
选中组件,开启【绑定对象】,选择对应的字段,如选中图片组件,绑定商品图片
选择文本组件,开启【绑定对象】,选择对应的字段,绑定商品标题
依次绑定价格、销量
注:电商、预约、到店、视频等都有固定的字段供选择,不需要自主新增;但是应用数据没有写死的字段供选择,应用数据需要自主创建字段,创建流程:
创建完之后,其他绑定流程都是一样的

图片47.png
图片48.png

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

图片49.png

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

图片50.png

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

图片51.png

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

图片52.png

需要根据什么进行排序,可以找到对应的排序组件进行设置,如下图:
名称输入为商品标题、选择排序顺序是升序还是倒序,及根据什么字段进行排序

图片53.png

7)设置列表高度
分为3种:
自定义高度:指的是设置一定的高度,列表数据只能在该高度内滚动
自适应高度:指的是不管数据有多少,根据设置每次加载的数据条数进行加载;其分为点击加载和滚动加载(点击加载:点击某个文案进行加载数据;滚动加载:滚动列表就可以加载数据)
自定义条数:对该列表设置条数,在该列表只展示设置的条数

图片54.png

8)对分类设置样式

图片55.png
图片56.png

9)全部设置完了之后,可以查看效果
注:后台添加了多少条数据,则在小程序中将会显示多少条数据

图片57.png

后台添加的商品数据:

图片58.png

3.一级竖版

1)添加组件到编辑器,支持更换模板
2)样式设置和在动态分类中添加组件的流程和一级横版是一样的

图片59.png

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

图片60.png

4)组件样式设置

图片61.png

4.一级大图

1)添加一级大图到编辑器,支持更换模板
2)列数设置:指的是每一行显示多少个
上下结构:指的是图标和文字的排版是上下结构
左右结构:指的是图标和文字的排版是左右结构

图片62.png

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

图片63.png

4)组件样式

图片64.png

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

图片65.png

5.二级横版

1)添加二级横版到编辑器,支持更换模板
2)列表支持自定义列表样式,和一级横版类似

图片66.png

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

图片67.png

4)组件样式设置

图片68.png

6.二级竖版

1)添加二级竖版到编辑器,支持更换模板
2)在动态分类上添加组件,制作列表样式的流程和一级横版类似

图片69.png

3)设置组件样式

图片70.png

4)效果图:

图片71.png

7.二级大图

1)添加分类组件到编辑器,支持更换模板
2)选择数据来源,操作和一级大图类似

图片72.png

3)设置组件样式

图片73.png

8.收藏为模板

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

图片74.png

9.模板管理

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

图片75.png
图片76.png



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

发表于 2020-6-22 15:55:38 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽

0

主题

1

回帖

14

金钱

新人求带

积分
0
发表于 2018-9-20 23:50:36 | 显示全部楼层
为啥预览看不到内容  开发板预览也是看不到 空白  已经绑定后台数据 请指导下 感谢

0

主题

1

回帖

38

金钱

新人求带

积分
0
发表于 2018-7-29 20:24:14 | 显示全部楼层
预约可以实行动态分类吗?

5

主题

1

回帖

2100

金钱

版主

积分
0
 楼主| 发表于 2018-8-1 14:54:41 | 显示全部楼层
15060006460 发表于 2018-7-29 20:24
预约可以实行动态分类吗?

您好,目前还不行

0

主题

3

回帖

18

金钱

新人求带

积分
0
发表于 2018-9-19 12:01:28 | 显示全部楼层
太麻烦了
回复

使用道具 举报

0

主题

3

回帖

18

金钱

新人求带

积分
0
发表于 2018-9-19 12:04:50 | 显示全部楼层
为什么不能直接添加高级列表,非得先添加个自由面板,再添加图片和文字呢??搞不懂
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2024-11-3 17:57 , Processed in 0.141855 second(s), 36 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表