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

做APP設計時，圖片多選上傳是非常常用的一個功能點，那如何用Axure進行模擬設計呢？本文作者分享了完整的流程，希望可以幫到大家。

在移動端應用中，提供多選圖片上傳功能對于用戶體驗和功能性具有重要意義，尤其是在像微信、微博等社交媒體平臺上。

例如用戶可以快速上傳多張圖片進行分享，發布相冊或創建圖文并茂的動態；賣家可以一次性上傳多個產品圖片，提高商品展示效果；房主或中介可以上傳多張房屋照片，提供更全面的房產展示；用戶可以上傳多張活動照片，參與比賽或活動分享。

所以今天作者就教大家怎么在Axure用中繼器制作多選上傳圖片的原型模板，具體效果如下所示：

一、效果展示

1. 點擊+號按鈕進入相冊頁
2. 在相冊頁里可以選擇多個圖片，案例中限制數為9，達到限制數繼續選擇會彈窗提示
3. 點擊選擇按鈕后，將圖片設置會添加主頁面
4. 在主頁面點擊圖片可以顯示大圖，點擊刪除按鈕可以刪除選中
5. 如果選擇圖片小于就，可以再次點擊+號繼續添加

二、制作教程

制作這個主要分為三個部分，包括主頁面、相冊頁面（選擇圖片）、大圖頁面

1、主頁面

主頁面如下圖所示，我們用中繼器來制作，在中繼器里面添加圖片元件，選擇網格分布，每行3個，多頁顯示，一頁最多顯示9個

中繼器表格里我們需要兩3列內容，no列用于對圖片的排序，picture列用于存放圖片，name列用于記錄圖片名。第一行no列默認為0，導入+號的圖片。

中繼器載入時，我們用排序的交互，對no列進行排序，按降序排列，這樣我們后續選中圖片，設置no值比0大，這樣添加按鈕就可以永遠在最后一張圖，如果上傳了9張，因為每頁顯示9，所以添加按鈕就到達第二頁，就默認看不到了。

然后我們要讓中繼器picture列的圖片值設置到圖片元件里，如果是axure10的話，點擊鏈接，選擇圖片元件即可，如果是axure8、9就要在中繼器每項加載時，用設置圖片的交互，將picture列的值設置到對應的圖片元件里。

2、相冊頁面

相冊頁面主要有中繼器，按鈕，矩形組成，如下圖所示擺放

中繼器里面包括圖片元件和多選按鈕，案例中多選按鈕由形狀制作而成，可以簡單理解為一個選中的樣式（√），一個沒選中的樣式（圓圈）

中繼器表格里主要有以下幾列，picture列：用于存放圖片；name列：記錄圖片名；xuanzhong列：控制是否選中

在中繼器每項加載時，我們要讓中繼器picture列的圖片值設置到圖片元件里，如果是axure10的話，點擊鏈接，選擇圖片元件即可，如果是axure8、9就要在中繼器每項加載時，用設置圖片的交互，將picture列的值設置到對應的圖片元件里。

我們用xuanzhong列的值控制多選按鈕是否選中，如果值等于1，就是選擇，否則就未選中。我們按照這個邏輯設置多選按鈕，用顯示和隱藏的交互，如果xuanzhong列的值等于1，就顯示選中、影藏未選中，否則就顯示未選中，隱藏選中

點擊選中按鈕時，我們要根據選中列的值來控制，是選中狀態還是未選中狀態，如果是選中狀態，點擊就是要變成未選中的狀態，那么我們就用更新行的交互，更新當前行的值為0

如果選中列的值不為1，就是要從未選中變成選中，原則上我們也是用更新行的交互，將當前行更新為1即可。不過這里有個邏輯要處理，因為我們最多上傳9張，像微信朋友圈微博很多移動端都是這個邏輯，所以我們還需要判斷選中了幾張

這里我們需要在中繼器每項加載時用一個文本來記錄，在第一行加載的時候，設置文本值為0，如果選中列的值為1就用設置文本的交互，將他設置為原來的值+1，這樣就可以記錄到有選中了幾個，再用設置文本的交互，將已選數量設置到選擇按鈕上。

那回到前面的交互，如果點擊選中列的值不為1，就是要從未選中變成選中，我們就要判斷選中了幾個，如果小于9，就用更新行的交互，更新當前行的值為1，這樣就可以選中了，如果選中的數量為9，就是已經選滿了，不能再選了，我們就用顯示的交互，顯示提示彈窗

然后我們就要把選中的圖片信息添加到主頁的中繼器里，這里我們用添加行的交互即可，在選中的條件下，即xuanzhong列的值等于1，我們用添加行的交互，將當前中繼器表格里的值設置添加到主頁的中繼器即可，添加行的時候no列的值填寫1，比0大就可以了。

這里需要注意的是，因為每次更新中繼器都會重新讀取，為了避免重復添加，我們用在中繼器開始加載時，要先做刪除行的操作，刪除的條件就是除了no列=0的其他列刪除

我們把中繼器右鍵轉為動態面板，如果圖片太多，超過一個頁面的高度，我們還可以再次轉為動態面板，然后用拖動外面板移動內面板的交互，讓他可以上下拖動選擇更多。

然后我們把這個頁面所有內容右鍵轉為動態面板，右鍵固定在左上角，鼠標單擊關閉按鈕或者選擇按鈕時，用隱藏的交互，將該面板隱藏即可。

主頁如果點擊中繼器里的+號圖片，就是no值為0的圖片元件，我們用顯示的交互，顯示這個動態面板就可以了，因為這個面板后面還有第二個狀態（大圖頁），所以，我們用設置面板狀態，設置他到相冊頁這個狀態，設置的時候可以勾選隱藏時顯示，就不用多寫一個顯示的交互了。

3、大圖頁面

大圖頁面包含圖片元件，刪除和返回按鈕，文本標簽，矩形等，如下圖所示擺放，放在上面相冊頁面的第二個狀態頁里

回到上面說的，主頁頁如果點擊中繼器里不是+號圖片，就是想查看大圖，所以，我們用設置面板狀態，設置他到大圖頁這個狀態，設置的時候可以勾選隱藏時顯示，就不用多寫一個顯示的交互了。

然后用設置圖片的交互，將中繼器里當前行的圖片值設置到大圖元件里，然后用設置文本交互，將name列的值設置到標題元件里。這里還需要一個默認隱藏用于記錄名稱的元件，把名字設置進去，這樣后續離開中繼器后才知道要更新那條數據。

鼠標點擊刪除按鈕時，就是要從主頁刪除這張照片，那主要圖片的顯示與否，是通過相冊頁中繼器是否選中來控制的，所以我們用更新行的交互，條件是相冊中繼器里name列的值等于記錄名稱的值，我們把它選中列的值更新為0，就是從選中變成未選中，這樣在主頁就不會出現這張圖片了，在相冊頁頁不會選中，最后我們用隱藏的交互，隱藏動態面板即可

如果點擊返回按鈕，我們就不用刪除，直接用隱藏的交互隱藏動態面板即可。

這樣我們就完成了移動端多選圖片上傳的原型模板了，后續使用也很方便，只需要在中繼器表格里導入圖片填寫對應的信息，預覽后即可自動生成對應的效果。

那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。