可以往返的点击滑动切换，苹果的这个效果咋实现？
这是普通的左右滑动切换图片：
组件：单层滑动-左滑
编号：10020（组件）
后来出现了左右滑动切换时可以自动对齐的：
组件：单层滑动-左滑(自动对齐)
编号：10236（组件）
一下子就高级了不少，体验感也上去了。
左右滑动切换效果如果还想更上一层楼，不如试试苹果《这块健康神器，帮你各种比心。》一文中点击触发的吧，支持来回往返点击，体验一下：
组件：Apple同款-点击-左右往返滑动切换
编号：10581（组件）
苹果原文在此基础上加了一层镂空的圆角白色前景图，使其与产品圆润的设计更加匹配：
组件：Apple同款-点击-左右往返滑动切换
编号：10581（组件）
我们知道使用 iPaiban Pro 编辑器制作普通的左右滑动效果很简单，选择相应的组件，批量上传准备好的素材，几秒钟做好，而点击左右往返滑动切换使用 iPaiban Pro 制作起来也是同样简单快捷。
一起看下教程吧：
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com
组件：Apple同款-点击-左右往返滑动切换
编号：11581（组件）
第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，在「点击」-「滑动切换」分类中找到「Apple同款-点击-左右往返滑动切换」组件，或者直接搜索组件编号11581，点击选择。
第2步：上传图片素材
为了让大家更好地理解素材结构，该组件设有默认素材，我们删除默认素材上传自己的素材替换即可。
删除素材后点击「+」号批量上传准备好的图片素材，所有图片尺寸需保持一致。
点击「换图」按钮上传前景图，如无需要可不传。前景图也需与前面的滑动图尺寸一致。
第3步：调整触发区域
双击编辑区图片，调出触发区域调整窗口。红色色块即为触发区，通过拖拽可进行调整。
前面几张设置点击左滑切换的触发区，最后1张设置点击右滑切换的触发区。左滑切换的触发区每张可以设置不同位置，右滑切换的触发区在每张图片都是同一位置，即为最后1张图片上设置的区域。
第4步：调整动画参数
按照调整好的触发区点击最右侧「预览草稿」，手机扫码预览效果（该效果不支持直接在编辑器点击预览）。
根据预览效果调整图片切换动画的时间。
第5步：导入公众号后台
效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。
使用同步功能不用频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码预览在公众号的效果。
如需局部导入可参考：《iPaiban Pro小助手安装和使用教程》
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
新用户在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）