朋友们大家好，我是三儿。
最近有不少朋友看到大牌都在制作无限选择器效果，点击顶部不同标签，底部随机对应变化，有些是变化对应的图，有些是变成滑动承载更多的内容，就像下面「字节跳动招聘」这篇推文一样👇
那么这个效果我们应该如何制作呢？别着急，往下看开启我们今日的学习之旅。
注：本文素材来源均来自字节跳动招聘，仅做教学使用。
在135编辑器页面左侧找到「SVG编辑器」
进入SVG编辑器后在左侧选中「互动效果」，在搜索框搜索组件竖向多标签点击切换（自定义触发）或组件ID：311
点击组件进入SVG编辑器中，这个时候我们需要看清楚素材要求。
需要注意的是上传的背景图需要有点击切换的标签，图文内容的高度，不能超过背景减去标签区域的高度。
看起来有些难以理解？素材图贴上大家应该就能明白了。
背景图高度1530px
标签高度330px
滑动展示高度不超过背景图减去标签高度
1200px
准备好素材图后，我们就可以按照要求上传素材图了。
点击「新增板块」添加「背景图」「调整触发区域」
根据我们前面gif图展示，本文切换后是一个双层滑动，所以我们在「编辑图文内容」板块中需要添加一个双层滑动，这里我们选择「背景固定前景自动居中横向双层滑动」组件id：198
我们分别上传背景图和滑动图，根据实际需要设置滑动方向。
细心的朋友已经发现，完成滑动制作后最后的内容图遮挡住了点击切换标签的位置。
大家不要怀疑自己做错了，我们现在只需要调整下「图文内容起始位置」即可
这个数值不是一定的，每个素材内容不同调整的数值也会产生相应的变化，在本文我们调整到20%比较合适。
调整后，就能发现内容板块没有对顶部标签切换区域有所遮挡，剩下仅需要我们重复上述步骤添加内容即可。最后让我们来一起看看效果吧👇
在「编辑图文内容」板块中
我们不仅可以添加双层滑动
还能仅添加图片
或是轮播抑或是带有超链接的滑动图
有非常多的组合等待着大家去探索
怎么样今天这个效果
是不是既简单又让人眼前一亮
学会了大家就快到135编辑器中
动手操作吧
大家还有什么大牌效果想要学习的
可以在评论区留言噢
三儿会不定期的选择写教程哦
朋友们
我们的年终盛会限时开启
个人会员升级最高送1年会员时长
企业会员最高送500京东卡
优惠不等人
大家快扫描下方二维码参与吧
