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

zhichi_admin

观看此功能视频教程请点击：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

Luck、7年。

不错的哈

lzhb1502

真的非常感谢。。