国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

進度條可以起到讓用戶耐心等待的作用，讓用戶了解當(dāng)前任務(wù)完成的時間進度、有效防止用戶的矛盾心理（等了好久還沒有反應(yīng)，我要不要終止掉重新來一遍？但是之前它好像跑了好久了，也許下一刻就可以完成呢）。作者將通過這篇案列分享，教大家使用Axure制作實現(xiàn)“帶加載效果的百分比進度條”。

演示地址：帶加載效果的百分比進度條

實現(xiàn)效果

1. 點擊“開始演示”按鈕，展示帶百分比的進度條效果；2、進度條在加載的過程中，按鈕文字為“演示進行中”；
2. 進度在20%的時候，停止加載，按鈕文字變?yōu)椤皧^力加載中，請等待！”且按鈕不可點擊，一秒鐘后，繼續(xù)加載，文字變?yōu)椤把菔具M行中”；
3. 進度在60%的時候，停止加載，按鈕文字變?yōu)椤熬W(wǎng)絡(luò)較差，請等待！”且按鈕不可點擊，兩秒鐘后，繼續(xù)加載，文字變?yōu)椤把菔具M行中”；
4. 進度在“演示進行中”時，可以點擊按鈕，按鈕文字變?yōu)椤耙褧和＃c擊繼續(xù)”，再次點擊，恢復(fù)進度加載效果；
5. 進度在100%的時候，停止加載，按鈕文字變?yōu)椤袄^續(xù)演示”，點擊按鈕，開始新一輪的加載效果。

原理分析

1. 進度條加載效果由固定長度背景+可變長度條組成；
2. 點擊按鈕，觸發(fā)動態(tài)面板自動循環(huán)改變狀態(tài)；
3. 利用動態(tài)面包板狀態(tài)改變事件觸發(fā)進度條長度變化；
4. 進度條長度的變化引起百分比的變化；
5. 百分比在20%、60%、暫停時分別給按鈕顯示不同的文字。

元件準(zhǔn)備

1. 循環(huán)動態(tài)面板，用于控制進度條自動加載2、當(dāng)前進度動態(tài)面板，用于顯示當(dāng)前進度；
2. 進度條背景，用于當(dāng)前進度的對比；
3. baifenbi矩形，文字顯示當(dāng)前的進度百分比；
4. submit矩形，用于觸發(fā)進度條的首次加載，及顯示當(dāng)前加載狀態(tài)。

重新布局元件后效果如下：

實現(xiàn)步驟

（1）設(shè)置“submit”按鈕單擊事件

通過單擊“submit”控制動態(tài)面板的狀態(tài)是否改變，用動態(tài)面板的狀態(tài)改變?nèi)タ刂七M度條的加載效果單擊“submit”時，切換是否選中狀態(tài)。

1. 選中時，執(zhí)行循環(huán)效果，將“submit”文字改為“演示進行中”；
2. 取消選中時，暫停循環(huán)效果，將“submit”文字改為“已暫停，點擊繼續(xù)”。

注意：當(dāng)進度條加載為100%時，單擊“submit”需要將進度條長度進行初始化。

（2）設(shè)置進度條加載效果

面板的狀態(tài)改變時，設(shè)置進度條的尺寸改變事件。

當(dāng)加載為20%時，暫停1秒鐘，顯示“奮力加載中，請等待”，禁用“submit”點擊事件；加載為60%時，暫停2.5秒鐘，顯示“網(wǎng)絡(luò)較差，請等待”，禁用“submit”點擊事件；暫停過后，恢復(fù)循環(huán)效果，啟用“submit”點擊事件。

（3）設(shè)置百分比的文字改變

進度條的尺寸改變時，設(shè)置百分比的文字改變

本案例已完成，點擊查看上一篇案例《Axure教程：省市縣三級聯(lián)動選擇（全國省市區(qū)數(shù)據(jù)）》

本文由 @十月大神 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議