朋友們大家好，我是三兒。

最近有不少朋友看到大牌都在制作無(wú)限選擇器效果，點(diǎn)擊頂部不同標(biāo)簽，底部隨機(jī)對(duì)應(yīng)變化，有些是變化對(duì)應(yīng)的圖，有些是變成滑動(dòng)承載更多的內(nèi)容，就像下面「字節(jié)跳動(dòng)招聘」這篇推文一樣??

點(diǎn)擊查看原文

那么這個(gè)效果我們應(yīng)該如何制作呢？別著急，往下看開(kāi)啟我們今日的學(xué)習(xí)之旅。

注：本文素材來(lái)源均來(lái)自字節(jié)跳動(dòng)招聘，僅做教學(xué)使用。

在135編輯器頁(yè)面左側(cè)找到「SVG編輯器」

進(jìn)入SVG編輯器后在左側(cè)選中「互動(dòng)效果」，在搜索框搜索組件豎向多標(biāo)簽點(diǎn)擊切換（自定義觸發(fā)）或組件ID：311

點(diǎn)擊組件進(jìn)入SVG編輯器中，這個(gè)時(shí)候我們需要看清楚素材要求。

需要注意的是上傳的背景圖需要有點(diǎn)擊切換的標(biāo)簽，圖文內(nèi)容的高度，不能超過(guò)背景減去標(biāo)簽區(qū)域的高度。

看起來(lái)有些難以理解？素材圖貼上大家應(yīng)該就能明白了。

背景圖高度1530px

標(biāo)簽高度330px

滑動(dòng)展示高度不超過(guò)背景圖減去標(biāo)簽高度

1200px

準(zhǔn)備好素材圖后，我們就可以按照要求上傳素材圖了。

點(diǎn)擊「新增板塊」添加「背景圖」「調(diào)整觸發(fā)區(qū)域」

根據(jù)我們前面gif圖展示，本文切換后是一個(gè)雙層滑動(dòng)，所以我們?cè)?strong>「編輯圖文內(nèi)容」板塊中需要添加一個(gè)雙層滑動(dòng)，這里我們選擇「背景固定前景自動(dòng)居中橫向雙層滑動(dòng)」組件id：198

我們分別上傳背景圖和滑動(dòng)圖，根據(jù)實(shí)際需要設(shè)置滑動(dòng)方向。

細(xì)心的朋友已經(jīng)發(fā)現(xiàn)，完成滑動(dòng)制作后最后的內(nèi)容圖遮擋住了點(diǎn)擊切換標(biāo)簽的位置。

大家不要懷疑自己做錯(cuò)了，我們現(xiàn)在只需要調(diào)整下「圖文內(nèi)容起始位置」即可

這個(gè)數(shù)值不是一定的，每個(gè)素材內(nèi)容不同調(diào)整的數(shù)值也會(huì)產(chǎn)生相應(yīng)的變化，在本文我們調(diào)整到20%比較合適。

調(diào)整后，就能發(fā)現(xiàn)內(nèi)容板塊沒(méi)有對(duì)頂部標(biāo)簽切換區(qū)域有所遮擋，剩下僅需要我們重復(fù)上述步驟添加內(nèi)容即可。最后讓我們來(lái)一起看看效果吧??

在「編輯圖文內(nèi)容」板塊中

我們不僅可以添加雙層滑動(dòng)

還能僅添加圖片

或是輪播抑或是帶有超鏈接的滑動(dòng)圖

有非常多的組合等待著大家去探索

怎么樣今天這個(gè)效果

是不是既簡(jiǎn)單又讓人眼前一亮

學(xué)會(huì)了大家就快到135編輯器中

動(dòng)手操作吧

大家還有什么大牌效果想要學(xué)習(xí)的

可以在評(píng)論區(qū)留言噢

三兒會(huì)不定期的選擇寫教程哦