感謝導語：上傳支持是在手機得使用中經常會遇到得場景，感謝便分享了用中繼器制作移動端支持上傳效果得方法，一起來看一下吧。

在手機app、小程序里，經常會出現上傳支持得場景，例如上傳頭像、上傳證件照、發送支持……

所以今天就教大家在Axure中，如何運用中繼器，制作出高保真得上傳效果。

一、制作完成后應具備以下效果箭頭按鈕，可以查看相冊（中繼器）里得所有支持在相冊（中繼器）里選擇支持后，可以將支持回顯到對應頭像支持內

原型地址：wg7da2.axshare/#g=1

二、制作材料準備1. 手機設備得組合素材

手機設備素材包括：手機外框，時間文本標簽，圖標（信號、電量、wife）等，這部分內容是非必要，可以替換得，而且素材都可以在網上找到，所以就不詳細展開了。

2. 動態面板

我們這里需要用到動態面板，新建兩個state，第壹個是個人信息頁，第二個是相冊頁。

1）個人信息頁

標題文字、返回按鈕、添加按鈕、頭像支持、箭頭（選擇）按鈕、其他文本標簽說明文字……你們可以按照需求擺放整齊，案例中擺放如下圖所示：

2）相冊頁

關閉按鈕、中繼器，單選按鈕、其他文本標簽說明文字……

中繼器內需需要放置一個支持元件，表格列名改為picture，在中繼器表格里面右鍵導入本地支持，或者輸入支持得在線鏈接。布局選擇網格排布，每行4項。

注意：如果中繼器內部支持較多，簡單來說就是超過了手機得尺寸，這時我們就要轉為動態面板，因為這里是移動端，所以操作上我們不應該調出滾動條，因為手機沒有鼠標可以滾動。

所以合理得設計，應該是用動態面板可以設置在面板拖動時，移動中繼器整個組合上下移動。由于這里有點復雜，我們在這個案例里不詳細展開，有興趣得同學可以研究一下。

三、交互制作1. 中繼器每項加載時

相冊頁得中繼器每項加載時，我們要用設置支持得交互，將中繼器表格里存放得支持，設置在中繼器內得支持元件，設置支持得時候我們選擇值，然后填入item.picture，這里代表中繼器表格里對應得支持。

2. 中繼器內支持元件鼠標單擊時

中繼器內支持元件鼠標單擊時，即選中了該支持為頭像，所以我們也是用設置支持得交互，將鼠標單擊支持對應得值，設置到頭像支持里，又因為支持得值是存放在中繼器表格內容，所以簡單來說，其實對應得支持值即item.picture。

設置支持完成后，我們用設置動態面板得交互，將動態面板設置到個人信息頁面即可。

3. 相冊頁關閉按鈕鼠標時

鼠標關閉按鈕時，即取消更換頭像，這里我們用設置面板狀態得交互，將動態面板設置到個人信息頁面即可。

4. 個人信息頁面右箭頭鼠標單擊時

鼠標個人信息信息頁面得右箭頭時，即需要更換頭像，所以我們用設置面板狀態得交互，將動態面板設置到相冊頁面即可。

這里有同學可能會問為什么不把這個交互設置到個人信息頁面得支持里呢。其實都可以，看你們個人得習慣，因為得喜歡是支持顯示大圖得效果，這些效果都是可以后續自行增加得，所以就把這個交互設置到右箭頭里，市面上大多數app都是這樣操作得，當然了，你們也可以根據自己得需求進行修改。

那么我們就完成了用中繼器制作移動端支持上傳效果得原型模板了，下次使用時，我們只需要導入支持即可自動生成交互，是不是很方便呢？感興趣得同學們可以動手試試哦。

那本期得教程就到此為止了，感謝您得閱讀，我們下期見，88~

感謝由 等AI產品人 來自互聯網發布于人人都是產品經理。未經許可，禁止感謝

題圖來自Unsplash，基于CC0協議