zhichi_admin 发表于 2018-7-4 17:59:32

【新版编辑器】滑动面板 - 教程

观看此功能视频教程请点击:http://school.jisuapp.cn/courses/151-17.html
定义:在滑动面板上添加图片、文本、按钮等基本组件,打包后在小程序中可通过手指滑动屏幕就可以切换面板,称为滑动面板。将整块区域收藏为一个模板,把它称之为滑动面板模板。类型:单面横滑,多面横滑

一、滑动面板使用教程
1.组件添加
进入【编辑页面】-【组件库】-【布局】-【滑动面板】,添加滑动模板组件

2.选择模板
打开滑动面板库,选择空白模板/系统模板注:右侧选择模板,中间手机界面可直接预览该模板

3.单面横滑面板的操作
1)设置指示点样式,有4种样式供选择2)设置是否自动滑动注:支持更换面板

3)面板管理:在右侧可以根据需要新增面板,在面板中置放基本组件(如文本、按钮、图片等)

4)在滑动面板上添加组件后,可以对该组件进行设置,如下图:
5)设置组件样式,组件样式属性都是对滑动面板生效,滑动面板中添加的组件样式需要对组件进行设置

4.多面横滑面板的操作
1)添加多面横滑面板到编辑器2)右侧可以对面板进行管理

3)高级设置:根据需求进行相关设置,以下是对高级设置的解释

【焦点面板】:如下图截图所示,中间的面板的大小大于旁边的面板大小,当旁边的面板滑动到某个区域,也会慢慢变大,我们称慢慢变大的面板称为“焦点面板”,其余面板称为“其他面板”,支持自定义焦点面板与其他面板的大小之比【显示标题】:若需要面板显示标题,则在面板管理输入标题,并且将开关开启【显示数量】:若需要在面板右下角显示当前面板数,则开启开关即可

4)切换至组件样式,可以对面板进行设置,以下是对各属性的介绍【基础设置】:是对整个滑动面板进行设置,支持对面板设置背景图【子面板设置】:主要值对焦点面板进行设置,其他面板将根据焦点面板的设置自动根据比例缩小居中展示,如设置焦点面板长200,宽100,焦点面板/其他面板大小为2倍,则其他面板的大小长为100,宽为50【参考点】:是指当焦点面板滑动整屏的某个位置,这个面板将会变大,这个位置称为参考点,值位于0-1之间,如设置参考点为0.5,则焦点面板移动到中间位置,这个面板将会变大【标题设置】:主要是对面板上方的标题字体进行设置

二、模板管理
1.系统模板库
滑动面板库:即速应用系统模板库,供使用户直接使用我的模板:用户可自主收藏面板,以备下次使用
2.我的面板
(1)分类操作新增分类:点击【新增分类】-【输入分类名】-【点击enter/保存】,注释:需保证分类名称不重复以及不为空编辑分类:鼠标移动到分类列表,点击【编辑】-【点击enter/保存】(2)批量管理点击“批量管理”,选中需要批量操作的模板,点击【删除】/【移动】操作批量删除:【选中模板】-点击【删除】-点击【确定】,模板将会全部删除批量移动:【选中模板】-点击【移动】-【选择分类】-点击【确定】,移动成功(3)单面横滑操作鼠标移动到单个模板上,可以编辑/删除模板

3.收藏面板
①在编辑器右侧点击【收藏为滑动面板】,如图:

②填写相关信息,如模板标题、模板缩略图、对应的分类。若不选择,分类默认选择是“全部”;若分类中没有需要的分类名,可点击“管理分类”,创建一个新的分类名。

③填写完毕后,点击【确定】,完成收藏操作,可在编辑器点击【滑动面板】,在“我的”处查看已收藏的模板

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

即速老徐 发表于 2020-6-22 15:54:59

Luck、7年。 发表于 2018-7-6 11:31:52

不错的哈

lzhb1502 发表于 2018-11-7 22:46:43

真的非常感谢。。
页: [1]
查看完整版本: 【新版编辑器】滑动面板 - 教程