生活中經(jīng)常遇到需要平滑改變一個值的應用場景。比如聽音樂的過程中，調(diào)節(jié)音量，又比如游戲競猜過程中，調(diào)節(jié)競猜數(shù)量等，這種場景最適合使用滑動條。作者將通過這篇案列分享，教大家使用Axure制作實現(xiàn)“滑動條：拖動滑塊改變進度”
演示地址：滑動條：拖動滑塊改變進度
實現(xiàn)效果
1、左右拖動滑塊，實時顯示當前進度
2、向左或向右拖動均有邊界值，無法拖出邊界范圍
3、實時顯示當前的百分比數(shù)值
原理分析
1、滑動條效果由固定長度背景 進度可見區(qū)域組成
2、拖動滑動，觸發(fā)進度可見區(qū)域改變，從而顯示滑動條效果
3、利用進度可見區(qū)域與背景的比例實時計算當前進度百分比
元件準備
1、一張圖片，轉(zhuǎn)換為動態(tài)面板，表示滑塊
2、紅色背景矩形元件，轉(zhuǎn)換為動態(tài)面板，利用動態(tài)面板的可見范圍，表示進度
3、灰色背景矩形元件，用于呈現(xiàn)滑塊進度對比
4、一個文本矩形，默認初始文字“當前百分比：0%”，用于顯示當前百分比
將進度面板里面的紅色背景矩形向左移動，使矩形的右邊界為0，此案例矩形寬度為300，所有向左移動300
整理元件后，最終呈現(xiàn)效果如下：
實現(xiàn)步驟
整個案例過程，只需對滑塊做事件設(shè)置，即可完成滑動條效果
拖動滑塊時，水平移動滑塊，同時設(shè)置文字改變；
滑塊在移動的過程中，設(shè)置進度面板里面的紅色背景元件跟隨滑塊移動
下圖是移動滑塊的事件設(shè)置界面，注意是“水平移動”；左邊界、右邊界值的設(shè)置，防止拖動滑動超出范圍
左側(cè)邊界值設(shè)置如下：
右側(cè)邊界值設(shè)置如下：
我們在拖動滑塊時，設(shè)置文本描述元件的值，實時顯示當前滑動100%進度
最后來一張跟隨事件的配置截圖
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。