一张滑动图中多个点击切换，华为这是怎么做的？

原创赞收藏评论

举报 2022-07-18

扫描,分享朋友圈

老规矩，先看效果：

这个效果来自华为《世界心脏日 | 有些“心”事，想告诉你》一文，整体来看，它是一个图片左滑效果，很多小伙伴好奇的是，第一张滑动图上有多个点击切换交互是怎么做的？

通过两种路径我们可以实现：
一个是SVG案例库（brandtime.cn）搜索这篇图文，在案例详情页通过一键还原来实现；一个是直接在 iPaiban Pro 编辑器找到需要的组件/组合，然后进行编辑。
对编辑器还不够熟悉的小伙伴可以使用第一种方法，它可以快速帮你定位需要的效果模板，剩下的你只需要换图就可以了。

案例库搜索「华为」，在搜索结果中限定条件「支持一键还原」就能看到所有可以一键还原的华为图文，目前有50多篇。

其中包括：
《“神奇动物”在这里，你能认出几个？》《【4月1日首发】华为云重磅上新+3》《熄灯后，HUAWEI P50 Pro怎么拍？》《每一面，都是我》《MWC 2022 @你，来逛展了！》《马上就过年了，你最期待什么？》《十大亮点回顾HDC2021》《赛事开启，HarmonyOS 2提醒你查收观赛指南》《用MatePad Pro，登上职场快乐星球》
另外苹果、宝马中国、GQ实验室等品牌也有许多案例支持一键还原，案例库支持一键还原的案例数量达7600+，一键还原的详细教程戳：《一键还原苹果、宝马和GQ图文，制作同款效果超方便啦！》
想直接使用编辑器制作的小伙伴，来看第二种方法的详细教程吧！
工具：iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com组合：长屏左滑组合编号：10867（组合）组件：点击-切换图片编号：10005（组件）
第1步：选择组合
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组合」按钮，点击「滑动组合」分类中选择「长屏左滑组合」，或者直接在「组合」中搜索编号10867。

第2步：添加组件位
点击「点击此处配置」，进入组合编辑模式。

在组合编辑模式中，默认放置了2屏滑动模块，华为案例中需要滑动8篇，我们点击「添加组件位」增加6屏滑动模块。

第3步：添加槽（小组件位）
每个滑动模块中默认有一个槽，一个槽代表一个小组件位，我们可以拖动需要的组件到槽中，一个滑动模块中可以添加多个槽。
注意，每个滑动模块的槽数可以不一致，但每个滑动模块所有槽中的图片加起来的图片高度应该保持一致。
华为案例中，第一屏滑动中有多个点击切换交互，说明有多个槽，我们点击「增加·槽」添加5个槽。其他屏滑动中只需添加1个槽。

第4步：拖拽组件到槽中并编辑
华为案例中主要用到了「无缝图」和「点击-切换图片」两种效果。我们在左侧组件中找到对应组件，按顺序分别拖拽到组件位中。

然后编辑组件上传需要的素材就可以了。

第5步：导入公众号后台
点击左上角「保存并退出」，在编辑器主页右侧点击「预览草稿」进行预览，预览没有问题后继续点击「导入微信后台」开始导到公众号。

导入时使用 iPaiban Pro 小助手更方便哦，最新v2.0版本的小助手还支持一键打包下载图文图片素材，非常方便，安装教程戳：《iPaiban Pro小助手v2.0来啦！》

制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
新用户在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。