展開與左滑，就這樣水靈靈地結合在一起了
點擊展開與滑動交互結合，有哪些效果？
最常見的就是滑動后點擊展開和在展開中嵌套滑動。
還有一種比較特殊的是橫向展開效果：
*素材來自Apple《跟著這份 macOS Ventura 詞匯表，開始新操作?！?/a>
組件：點擊-橫向展開點此0元購
編號：11501（組件）
今天給大家看個真正的二者合一的效果，可以說是展開中有滑動，滑動中有展開。
體驗一下：
*素材來自ECARX億咖通科技《億咖通·安托拉1000 Pro計算平臺助力領克08「智悅無界」》
組件：點擊展開式左滑(自動對齊)點此0元購
編號：11814（組件）
比起單純的左滑效果，點擊展開式的左滑，能使圖文在一定范圍內容納更多內容，可玩性也更高。非常適合產品功能展示、多人物介紹類的內容。
這種效果使用 iPaiban Pro 黑科技編輯器里的「點擊展開式左滑(自動對齊)」組件（編號：11814）即可實現。
以ECARX億咖通科技的文章為例，一起來看看如何實現吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：點擊展開式左滑(自動對齊)
編號：11814（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組件」按鈕，在「點擊」分類中找到「點擊展開式左滑(自動對齊)」組件，或者直接在搜索框中搜索組件編號11814，點擊選擇。
第2步：上傳圖片素材
在編輯器右側點擊「換圖」上傳背景圖。背景圖尺寸沒有限制，當點擊展開后，背景圖將會自動重復拼接，所以背景圖應盡量簡單，最好為純色或前后拼接無明顯斷層圖案。
接著設置滑動圖組數量。設置后點擊「+」號上傳滑動圖，注意每組的滑動圖片尺寸一致。
這里我們根據所需效果，分別上傳4組滑動圖。
第3步：調整效果參數
點擊組件編輯區域，在右側設置「上方滑動圖組顯示高度」和「下方滑動圖組上移高度」。
第4步：導入公眾號后臺
點擊最右側「預覽草稿」，效果滿意后接著點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
如需局部導入可參考《iPaiban Pro小助手安裝和使用教程》中導入功能的「導入代碼」部分。
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可注冊，編輯器所有組件/組合現已全部支持免費試用了。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）