朋友们大家好，我是三儿。

最近有不少朋友看到大牌都在制作无限选择器效果，点击顶部不同标签，底部随机对应变化，有些是变化对应的图，有些是变成滑动承载更多的内容，就像下面「字节跳动招聘」这篇推文一样👇

点击查看原文

那么这个效果我们应该如何制作呢？别着急，往下看开启我们今日的学习之旅。

注：本文素材来源均来自字节跳动招聘，仅做教学使用。

在135编辑器页面左侧找到「SVG编辑器」

进入SVG编辑器后在左侧选中「互动效果」，在搜索框搜索组件竖向多标签点击切换（自定义触发）或组件ID：311

点击组件进入SVG编辑器中，这个时候我们需要看清楚素材要求。

需要注意的是上传的背景图需要有点击切换的标签，图文内容的高度，不能超过背景减去标签区域的高度。

看起来有些难以理解？素材图贴上大家应该就能明白了。

背景图高度1530px

标签高度330px

滑动展示高度不超过背景图减去标签高度

1200px

准备好素材图后，我们就可以按照要求上传素材图了。

点击「新增板块」添加「背景图」「调整触发区域」

根据我们前面gif图展示，本文切换后是一个双层滑动，所以我们在「编辑图文内容」板块中需要添加一个双层滑动，这里我们选择「背景固定前景自动居中横向双层滑动」组件id：198

我们分别上传背景图和滑动图，根据实际需要设置滑动方向。

细心的朋友已经发现，完成滑动制作后最后的内容图遮挡住了点击切换标签的位置。

大家不要怀疑自己做错了，我们现在只需要调整下「图文内容起始位置」即可

这个数值不是一定的，每个素材内容不同调整的数值也会产生相应的变化，在本文我们调整到20%比较合适。

调整后，就能发现内容板块没有对顶部标签切换区域有所遮挡，剩下仅需要我们重复上述步骤添加内容即可。最后让我们来一起看看效果吧👇

在「编辑图文内容」板块中

我们不仅可以添加双层滑动

还能仅添加图片

或是轮播抑或是带有超链接的滑动图

有非常多的组合等待着大家去探索

怎么样今天这个效果

是不是既简单又让人眼前一亮

学会了大家就快到135编辑器中

动手操作吧

大家还有什么大牌效果想要学习的

可以在评论区留言噢

三儿会不定期的选择写教程哦