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

區間評分條是Axure原型中頻繁使用的一種表示工具，但這個簡單的效果內，包含了很多交互，我們來看看作者是怎么做的。

區間評分條是一種圖形化的表示工具，用于展示某一范圍內的數值或分數，并將其劃分成不同的區間。這種評分條通常用于直觀地顯示數據的分布或某個指標的表現。常用于產品評價、調查和反饋、學術評價、健康評估、績效評估、滿意度調查等場景。

所以今天作者就教大家怎么在Axure里制作區間評分條的原型模板，具體效果如下所示：

一、效果展示

1、在滑塊條區域可以左右拖動滑塊，根據兩個滑塊所在的位置，自動計算出對應的區間

2、通過過程中左側滑塊不能超過右側滑塊，兩個滑塊之間自動變藍，區間外的為灰色

二、制作教程

1. 材料裝備

• 滑塊：我們用圓來制作，設置邊線顏色為藍色，邊線可以設置粗一點，然后將圓轉為動態面板，因為只有動態面板才有拖動的事件，復制這個滑塊，我們需要左右兩個滑塊命名為開始和結束；
• 滑條：我們用矩形來制作，將矩形的圓角拉滿，我們需要灰色和藍色兩個滑條，藍色的在上方；
• 區間：區間我們用兩個文本標簽和一個~符號制作，分別對應開始和結束滑塊；
• 滿分值：用文本標簽制作，里面填寫分數的最大值，例如滿分100就填100，滿分是10就填10，默認隱藏即可，只用于后續邏輯運算。

如下圖所示擺放即可

2. 交互制作

鼠標拖動左側開始滑塊時，我們首先用移動的交互，將滑塊跟隨鼠標水平移動，我們要增加一個移動的邊界，左側開始滑塊的話邊界應該是條形左側的x值，以及右側結束滑塊的位置，那這里我們有兩種不同的邏輯，看看是否需要留空隙，如果不需要留控制，右側邊界就是結束滑塊最右側的坐標值，如果需要留間隙，右側邊界可以調整為借宿滑塊左側的坐標值。

鼠標拖動有色結束滑塊的交互也是一樣的，只不過左右邊界變成左邊開始滑塊的坐標值以及滑條最右邊的坐標值。

如果不留間隙的話，這代表兩個滑塊可以重疊，重疊的時候就會出現有可能擋住下方滑塊，例如右側在左側滑塊的上方，我們先移動了左側到達最右側和結束滑塊重疊，松手后，因為右側在上方，我們只能拖動右側滑塊，因為邊界的限制，右側滑塊就沒法移動了，導致想移動左側滑塊也不行，所以我們在拖動時，要將拖動的滑塊置頂，這樣就可以避免這樣的問題了。

這樣就完成了兩個滑塊的移動，接下來我們要根據兩個滑塊移動的位置，設置藍條的位置和尺寸，我們分別用移動事件和設置尺寸事件來完成。藍色滑條的高度是不變的，寬度就是開始和結束兩個滑塊之間的距離；位置就是開始滑塊的x坐標值。

我們還要根據滑塊的位置設置對應的分值區間，我們用設置文本的交互就可以，拖動的是開始滑塊我們就設置左側分值區間，拖動的是右側滑塊，我們設置右側的分值區間。按對應比例設置就可以了，簡單來說就是滑塊的x坐標值-滑條的x坐標值和滑條長度的比值在乘以滿分值，例如滿分是100分，滑條長200，滑塊移動到100的中間位置，此時的分值就是(200-100)/200*100=50分。這里面的結果有可能不是整數，我們就用tofixed四舍五入函數取整即可。

設置完分值之后，基本就完成了，但是我們需要考慮的是如果滿分值較小，例如是10分，因為我們前面用的四舍五入，所以很大一個方位會是同一個值，所以我們要根據數值，反推會對應的分值的中心點位置。我們用移動的交互，將開始滑塊和結束滑塊移動回對應的位置即可，這里的公式和上面的其實是一直的，上面是已知滑塊的x坐標值求分值，現在是已知分值求滑塊的x坐標值，我們移項就能解出來了。

最后我們還要考慮的是，滑塊一開始不在兩邊的情況，這里相當于已經拖動過了，所以我們在載入時，我們要根據兩個滑塊的位置，設置分值，以及藍條的尺寸和位置，這里和前面是一樣的，我們在載入時觸發前面滑塊移動的交互就可以了

這樣我們制作完成了，下次使用時，我們只需要根據實際需要修改滿分值里的數字，就可以自動生成對應的區間評分條，是不是很方便呢？

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