微信小程序开发|教程|文档|资源汇总_即速论坛

 找回密码
 立即注册

扫一扫,访问微社区

查看: 12703|回复: 3

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

  [复制链接]

910

主题

2100

帖子

3万

金钱

管理员

论坛管理员

Rank: 9Rank: 9Rank: 9

积分
0

突出贡献优秀版主荣誉管理论坛元老

QQ
发表于 2018-7-4 17:59:32 | 显示全部楼层 |阅读模式
观看此功能视频教程请点击http://school.jisuapp.cn/courses/151-17.html

定义:在滑动面板上添加图片、文本、按钮等基本组件,打包后在小程序中可通过手指滑动屏幕就可以切换面板,称为滑动面板。将整块区域收藏为一个模板,把它称之为滑动面板模板。
类型:单面横滑,多面横滑

图片18.png
图片19.png

一、滑动面板使用教程
1.组件添加

进入【编辑页面】-【组件库】-【布局】-【滑动面板】,添加滑动模板组件

图片20.png

2.选择模板

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

图片21.png
图片22.png

3.单面横滑面板的操作

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

图片23.png
图片24.png

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

图片25.png

4)在滑动面板上添加组件后,可以对该组件进行设置,如下图:
图片26.png

5)设置组件样式,组件样式属性都是对滑动面板生效,滑动面板中添加的组件样式需要对组件进行设置

图片27.png

4.多面横滑面板的操作

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

图片28.png

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

图片29.png

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

图片30.png

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

图片31.png
图片32.png

二、模板管理
1.系统模板库

滑动面板库:即速应用系统模板库,供使用户直接使用
我的模板:用户可自主收藏面板,以备下次使用

2.我的面板

(1)分类操作
新增分类:点击【新增分类】-【输入分类名】-【点击enter/保存】,注释:需保证分类名称不重复以及不为空
编辑分类:鼠标移动到分类列表,点击【编辑】-【点击enter/保存】
(2)批量管理
点击“批量管理”,选中需要批量操作的模板,点击【删除】/【移动】操作
批量删除:【选中模板】-点击【删除】-点击【确定】,模板将会全部删除
批量移动:【选中模板】-点击【移动】-【选择分类】-点击【确定】,移动成功
(3)单面横滑操作
鼠标移动到单个模板上,可以编辑/删除模板

图片33.png
图片34.png

3.收藏面板

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

图片35.png

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

图片36.png
图片37.png

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


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

0

主题

60

帖子

490

金钱

禁止发言

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

0

主题

3

帖子

569

金钱

新人求带

Rank: 1

积分
0
发表于 2018-7-6 11:31:52 | 显示全部楼层
不错的哈
回复

使用道具 举报

0

主题

5

帖子

68

金钱

新人求带

Rank: 1

积分
0
发表于 2018-11-7 22:46:43 | 显示全部楼层
真的非常感谢。。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2023-1-29 07:01 , Processed in 0.126146 second(s), 34 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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