卷轴式展开，是一种非常经典的创意展开玩法。
之前给大家整理过各种效果的卷轴式展开案例：《画轴/卷轴式SVG交互图文案例合集》
其中最简单实用和常见的就是下面这种效果1，卷轴上下分布，点击上轴图文展开，下轴跟随展开向下移动。
*素材来自青海日报快！打开卷轴get两会热词
组合：点击展开
编号：10307（组合）
组件：全能无缝图
编号：10028（组件）
稍微进阶一点的是下面这种效果2，无论点击卷轴的上轴还是下轴，图文都会展开。
*素材来自安慕希中秋限定 | 大话西游“月光宝盒”上新啦
组合：点击消失+跟随展开
编号：11896（组合）
这两个效果很像，基本只有点击展开触发范围的区别，但实现方式有很大不同，今天都会教给大家，大家可选择自己喜欢的一个制作。
卷轴式展开带有浓浓的中国风，无论是即将到来的元宵节还是全国两会，都非常适合使用。
下面一起看下排版教程。
效果1
点击上轴展开的排版教程
切图如下：
工具：i排版SVG编辑器，网址：SVG.iPaiban.com
组合：点击展开
编号：10307（组合）
组件：全能无缝图
编号：10028（组件）
第1步：设置卷轴上轴部分
①登录i排版SVG编辑器后，点击编辑器左侧「组合」按钮，在「花样展开」分类中找到「点击展开」组合，或者在组合中直接搜索编号10307，点击选择。
接着点击「编辑组合」，进入组合编辑模式。
在组合编辑模式中，我们需要分别设置展开前和展开后的内容。
③点击「展开前」区域，接着点击右侧「换图」按钮，上传卷轴的上轴部分图片。
第2步：设置卷轴内容部分
①「展开后」的内容支持嵌套各种组件，需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。
添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作。
效果1案例中嵌套的是一个「批量无缝图(全能)」组件（编号：10009）：
嵌套后上传卷轴的内容部分图片。
②点击页面空白处，在右侧设置展开时长。
展开高度一般无需调整，但当大家在手机上预览时，如果发现展开后有多余的空白或者没有展现出全部内容，这时候可以通过「加减展开高度」使其恰好展开。
第3步：设置下轴部分
①内容编辑完毕后，点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。
②点击编辑器左侧「组件」按钮，在「无缝图」分类中找到「全能无缝图」组件，或者在组合中直接搜索编号10028，点击选择。
然后在右侧上传卷轴的下轴部分，这样一个常见的卷轴式展开排版就完成了。
第4步：导入公众号后台
最右侧「预览草稿」可随时扫码预览效果，效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。
使用同步功能可以不用频繁在编辑器和微信后台切换，同步成功后可以立即扫码预览二维码查看。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。
效果2
点击上轴和下轴都会展开的排版教程
切图如下：
工具：i排版SVG编辑器，网址：SVG.iPaiban.com
组合：点击消失+跟随展开
编号：11896（组合）
第1步：设置卷轴下轴部分
①登录i排版SVG编辑器后，点击编辑器左侧「组合」按钮，在「花样展开」分类中找到「点击消失+跟随展开」组合，或者在组合中直接搜索编号11896，点击选择。
接着点击「编辑组合」，进入组合编辑模式。
在组合编辑模式中，我们需要分别设置展开前和展开后的内容。
②点击「展开前」区域，接着点击右侧两个「换图」按钮上传图片。
「点击前」上传引导点击展开的提示图，「跟随图片」上传卷轴的下轴部分图片。两张图片宽度需保持一致，跟随图片的图片高度需要小于点击前图片的高度。点击前图片尺寸决定了点击前整个展开的显示范围。
跟随图片是否消失选择「否」。
第2步：设置卷轴上轴和内容部分
①「展开后」的内容支持嵌套各种组件，需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。
添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作。
效果2案例中嵌套的是一个「批量无缝图(全能)」组件（编号：10009）：
嵌套后上传卷轴的上轴和内容部分图片。
内容部分图片设计时注意预留一个下轴图片停留的位置，以免展开后盖住正文内容。
②点击页面空白处，在右侧设置切换时长和展开时长。
展开高度一般无需调整，但当大家在手机上预览时，如果发现展开后有多余的空白或者没有展现出全部内容，这时候可以通过「加减展开高度」使其恰好展开。
第3步：导入公众号后台
内容编辑完毕后，点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。
点击最右侧「预览草稿」可随时扫码预览效果，效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。
使用同步功能可以不用频繁在编辑器和微信后台切换，同步成功后可以立即扫码预览二维码查看。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。
