中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：上傳圖片是在手機的使用中經常會遇到的場景，本文作者便分享了用中繼器制作移動端圖片上傳效果的方法，一起來看一下吧。

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

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

一、制作完成后應具備以下效果

• 點擊箭頭按鈕，可以查看相冊（中繼器）里的所有圖片
• 在相冊（中繼器）里選擇圖片后，可以將圖片回顯到對應頭像圖片內

二、制作材料準備

1. 手機設備的組合素材

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

2. 動態面板

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

1）個人信息頁

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

2）相冊頁

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

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

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

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

三、交互制作

1. 中繼器每項加載時

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

2. 中繼器內圖片元件鼠標單擊時

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

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

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

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

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

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

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

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

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

本文由 @AI產品人 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議