咱們先看效果：

這是 Apple 最新推送的一篇圖文《不就是一手好字嘛，你上 iPad 你也行》，里面有個(gè)自由滑動(dòng)的交互，模擬了在 iPad 畫(huà)畫(huà)操作屏幕的效果，不少人來(lái)問(wèn)編輯器能否實(shí)現(xiàn)。

可以！

i排版推送的開(kāi)啟7月會(huì)員日活動(dòng)的圖文《↓→←↑》中正好也用到了這個(gè)交互。

在編輯器中搜索關(guān)鍵詞「自由滑動(dòng)」可看到全部相關(guān)組件。

名稱(chēng)中的列數(shù)表示滑動(dòng)的整張大圖被切分了幾列，比如 Apple 這篇按照如下切圖就是3列，應(yīng)選擇組件11613制作。

需注意的是，該交互為固寬效果，也就是寬度固定，不會(huì)隨屏幕大小自適應(yīng)，在PC網(wǎng)頁(yè)和公眾號(hào)后臺(tái)編輯頁(yè)面顯示會(huì)亂，在大屏幕手機(jī)上會(huì)顯得比使用其交互的圖片窄一些。

不過(guò)不用擔(dān)心，仔細(xì)閱讀下面的教程，你也可以制作出和 Apple 一樣的效果。

詳細(xì)教程：

工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com

組件：自由滑動(dòng)(三列)

編號(hào)：11613（組件）

第1步：選擇組件

登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器左側(cè)「組件」按鈕，在「滑動(dòng)」-「自由滑動(dòng)」分類(lèi)中找到「自由滑動(dòng)(三列)」組件，或者直接搜索組件編號(hào)11613，點(diǎn)擊選擇。

第2步：上傳圖片素材

該效果滑動(dòng)范圍由第一張滑動(dòng)圖決定，組件要求所有滑動(dòng)圖尺寸一致。如需上傳背景圖，背景圖尺寸也應(yīng)與滑動(dòng)圖一致。
點(diǎn)擊右側(cè)「換圖」按鈕上傳背景圖。

點(diǎn)擊「+」號(hào)按列上傳切分好的滑動(dòng)圖。

因?yàn)樽杂苫瑒?dòng)為固寬效果，在大屏幕手機(jī)上會(huì)顯得比使用其交互的圖片窄一些，背景圖的作用是可以拉平與其他交互的圖片寬度。

如果圖文中單獨(dú)使用該效果可不上傳背景圖；如果上傳背景圖，背景圖分為兩種情況，對(duì)應(yīng)滑動(dòng)圖需作不同的設(shè)計(jì)。

①純色背景圖：對(duì)應(yīng)滑動(dòng)圖的圖片邊緣顏色應(yīng)與背景圖統(tǒng)一（示例），否則會(huì)因?yàn)樽杂苫瑒?dòng)的固寬特性讓兩側(cè)露出的背景圖影響效果，如下：

②非純色背景圖：對(duì)應(yīng)滑動(dòng)圖應(yīng)像 Apple 這篇一樣為透明底（示例），否則也會(huì)影響效果。

第3步：導(dǎo)入公眾號(hào)后臺(tái)

點(diǎn)擊最右側(cè)「預(yù)覽草稿」預(yù)覽效果，效果滿意后點(diǎn)擊「同步至微信后臺(tái)」就可以了。

使用同步功能不用頻繁在編輯器和微信后臺(tái)切換，同步成功后可以立即掃描二維碼預(yù)覽在公眾號(hào)的效果。

如需局部導(dǎo)入可參考：《iPaiban Pro小助手安裝和使用教程》