“保时捷、小米汽车图文中的选配换色效果，怎么做啊？”
小米汽车一经上市发布便引起热议，小米汽车上市推文的一个排版效果也有不少小伙伴来问。
点击任一颜色选项，随即切换为对应颜色的产品图片，左滑可进行其他选配，这种排版怎么做？
体验一下：
*素材来自小米汽车《小米SU7 正式上市！售价21.59万起》
其实在1月份i排版就给大家介绍过保时捷的类似交互：
*素材来自保时捷中国《718 街头“显眼”包》
组件：点击-无限选择切换图片
编号：11765（组件）
现在小米汽车的效果相当于在保时捷这个交互的基础上多了一个左滑，该效果同样使用 iPaiban Pro 编辑器就能实现，只需使用一个左滑组合嵌套即可。
下面一起看下具体如何制作吧：
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组合：左滑组合(自动对齐)
编号：10249（组合）
组件：点击-无限选择切换图片
编号：11765（组件）
第1步：选择组合
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组合」按钮，在「滑动组合」分类中找到「左滑组合(自动对齐)」组合，或者直接搜索组合编号10249，点击选择。
第2步：嵌套组件
点击「编辑组合」，进入组合编辑页面。
组合默认有两个组件位，每一个组件位相当于一个滑动页，如果想要添加滑动页，点击「添加组件位」即可。我们需要3个滑动页，所以这里点击添加一个组件位。
组件位用于嵌套各种效果组件。嵌套方式为：拖动左侧需要的组件到组件位中。
根据需要，这里我们拖动「点击-无限选择切换图片」组件（编号：11765）至3个组件位中：
第3步：配置组件
①上传组件图片
点击嵌套在组件位中的「点击-无限选择切换图片」组件，会看到在右侧需要上传两部分图片：背景图和切换图。
背景图为用户还未点击时显示的图片；切换图为用户可以点击切换的图片。
所以背景图这里我们可以上传切换图的第一张图片，点击「+」号按顺序批量上传所有切换图。
背景图和所有切换图的尺寸需保持一致。
②设置组件触发区
如图所示，双击图片调出触发区域调整窗口调整触发区。触发区序号为几即代表第几张切换图，用户点击该序号所在位置便会切换该图片。
触发区之间不可重叠，调整触发区到合适位置后，一定点击「保存设置并退出」才算设置成功。
③上传滑动背景图
3个组件设置完毕后，点击页面空白处，会看到有一个左滑组合的背景图设置。
为了防止在苹果手机上滑动到末尾时露出白底显得突兀，这里我们可以上传一张纯黑背景图。背景图尺寸和滑动图尺寸保持一致。
第4步：导入公众号后台
点击左上角「保存并退出」退出组合编辑模式，接着点击最右侧「预览草稿」扫码预览效果，效果满意后接着点击「同步至微信后台」就可以了。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）