小程序滑动面板-教程-微信小程序制作-即速应用

小程序滑动面板-教程-微信小程序制作

浏览量：3327 时间：2020-03-28 来源：即速应用

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