Axure制作上傳列表的原型方法；
第壹，制作完成後，應該有以下效果:真的可以選擇電腦裏的本地文件；
選擇本地文件後，獲取所選文件的名稱信息；
模擬正在上傳的等待效果；
您可以刪除上傳的文件；
上傳失敗後，點擊失敗文本重新上傳。
二、生產資料的準備1。中繼器的原型主要由中繼器組成，所以我們需要建立壹個新的中繼器。復讀機中的素材包括:文件圖片-文件圖標；
藍色矩形——用來制造等待效果的橫條，圓角設置為最大；
淺藍色矩形-加載效果的背景條，圓角設置為最大；
文件名-顯示文件名，並用文本標簽；
上傳狀態——默認藍色文字，默認內容為上傳中；
刪除按鈕-刪除當前文件的圖標按鈕；
背景矩形——白色矩形，外部有淺藍色陰影；
豎線——用來分隔和美化原型。
放置如下:repeater表設置，表中有* * *三列:無-用於排序，按12345678順序填寫即可；
text-對應於文本名稱的文本；
狀態-上傳狀態包括上傳成功、上傳失敗和上傳進行中。
2.上傳按鈕組合因為我們要達到本地上傳文件，記錄文件路徑，獲取文件名，通過中繼器添加行的效果，所以上傳按鈕不僅僅是壹個按鈕，它是由以下四個部分組成的。1)藍色按鈕——命名上傳。至於頂層，按鈕組裏只看到這個組件，樣式可以設置的很漂亮。2)輸入框-命名文件。這裏我們需要使用Axure輸入框中的系統組件輸入框，將輸入框的輸入類型設置為文本，這樣當鼠標點擊輸入框時，就可以彈出文件的系統彈出窗口。讓我們縮小這個輸入框，用壹個藍色的按鈕擋住它。3)文本標簽——命名文本，用於記錄所選文件的路徑。默認情況下是隱藏的，可以通過藍色按鈕直接屏蔽。4)文本標簽——名為click，用於上傳文件後觸發repeater添加壹個line事件。第三，交互設置是1。加載repeater時，排序是交互式添加的——repeater按鈕的no列的內容按升序排列。這樣做是為了以後添加新文件時，新文件可以放在第壹行。2.加載每個項目時，轉發器以交互方式設置文本——將文件名元素的文本值設置為Item.text，即轉發器中文本列的值。然後我們需要把它設置成三種狀態，不同的相互作用。1)如果state列的值是設置正在上傳的文本——設置上傳狀態組件的文本值等於Item.text，也就是repeater中文本列的值。這裏，我們使用富文本的形式，這樣我們可以選擇將文本的顏色設置為藍色。設置大小——設置藍色矩形(上傳橫條)的大小，高於其原來的高度，寬度等於1。因為正在上傳，所以藍色條被設置為準備進行加載的最小效果。設置大小——再次設置藍色矩形(加載條)的大小，比原來的高度高，寬度等於灰色矩形(背景條)的寬度。這裏註意，我們需要在這種情況下添加2000ms的動畫時間，從而達到上傳加載的效果。等待——這裏我們需要等待上面的藍色矩形動畫時間結束，壹般比它長壹點。在這種情況下，我們將等待時間設置為2500毫秒..更新行-更新當前行的狀態列的文本，更新為上傳成功。這樣就成功完成了上傳加載的效果。2)如果狀態列的值設置為上傳成功的文本——將上傳狀態組件的文本值設置為等於Item.text，即repeater中文本列的值，這裏我們使用了富文本的形式，這樣可以選擇將文本的顏色設置為綠色。設置大小-設置藍色矩形(加載欄)的大小，它高於其原始高度，寬度等於灰色矩形(背景欄)的寬度。註意，這裏不需要添加動畫時間，因為動畫已經在上傳的同時完成了，而且這主要是默認列表。3)如果狀態列的值是設置上傳失敗的文本——設置上傳狀態組件的文本值等於Item.text，也就是repeater中文本列的值，這裏我們用的是富文本的形式，這樣可以選擇設置文本的顏色為紅色。3.上傳狀態當鼠標點擊文本時，上傳狀態可分為上傳成功、上傳進行中和上傳失敗。前兩個不需要處理。如果上傳失敗，我們想通過點擊文字達到再次上傳的效果。更新行-更新當前行和州列的值，並在上載時更新。因為我們在復讀機每次加載的時候都寫了正在上傳的事件，所以更新線路之後才會實現重新上傳的效果。4.鼠標點擊時關閉按鈕並刪除該行-刪除當前行的文件。5.鼠標點擊時的5.upload按鈕事件涉及壹些js代碼。如果沒有相關基礎，可能很難理解。下面我簡單解釋壹下思路。首先，當鼠標點擊這個按鈕時，我們點擊的代碼觸發文件組件點擊，相當於我們點擊藍色上傳按鈕時點擊文件組件，從而彈出本地文件選擇的彈出窗口。選擇本地文件後，我們要執行兩端的代碼:將所選文件的路徑名設置為text的組成部分；
再次單擊代碼以觸發原型中單擊文本標簽的Click事件。
稍後，我們將在點擊文本標簽中添加交互，並將選擇的文件名添加到repeater中。6 .當鼠標單擊組件時，單擊事件。據說當文件被選中時，組件的鼠標點擊會被觸發，所以我們需要在鼠標點擊時進行壹次交互。1)標記行-標記所有行。2)更新行——更新標記的行，即更新所有行，更新no列，將它們的值改為TargetItem.no+1。這裏的意思是把它們的無序號改成它們的原值+1，這樣原值就是12345678，就會變成23456789。這樣做的目的是為了以後我們添加新行的時候把最新壹行的編號設置為1，因為我們在加載repeater的時候是按照編號的升序來設置排序的，所以新上傳的文件可以排在第壹行。3)添加行——將列號的值更新為1，列狀態更新為uploading，列文本更新為lvar1。Slice ((lvar1。lastindexof(“”)+1。這裏需要說明壹下，因為我們選擇文件後，得到的是文件在文本組件上的路徑，比如C:fakepath微信截圖_ 20211014105011 . png，所以我們要對文本組件進行處理。通過觀察可以發現，文件問題是最後壹個符號之後的內容，所以可以用lastIndexOf函數找到最後壹個符號的位置，然後用slice從這個位置+1到達最後的文本，從而取出文件名。這樣，我們就完成了整個組件。如果我們把它放在壹起，我們可以直接復制它或者把它拖出組件庫以備將來使用。不是很好用嗎？好了，以上內容是“Axure如何原型化上傳列表？”希望對妳的Axure學習操作有壹定的作用！壹篇文章學Axure是不可能的，幾十篇幾百篇Axure文章都不壹樣。了解更多關於Axure、Axure相關文章、問答和視頻教程的信息。AXURE非常強大，妳甚至可以用它玩壹個簡單的遊戲，但是如果妳沒有想法，這個工具就沒用了，所以想法最重要！加油，專業學習Axure原型創意，快速獨立開始原型制作~