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

編輯導(dǎo)讀：滑動選擇器在手機端是一個比較常見的組件，主要用于多數(shù)據(jù)情況下的選擇。本文作者從工作實踐出發(fā)，分享了手機版滾動選擇器的相關(guān)設(shè)計思路，避免大家走一些不必要的彎路。

效果展示：

準(zhǔn)備：Axure 8（或Axure 9）軟件已安裝，掌握基本的軟件使用，掌握基礎(chǔ)的動態(tài)面板知識。

本教程知識點：

1. 進(jìn)階的動態(tài)面板使用。
2. 基礎(chǔ)函數(shù)應(yīng)用。
3. 基礎(chǔ)中繼器應(yīng)用。

本文以基礎(chǔ)的單一選擇為例（多選擇可以將滑動區(qū)域、數(shù)據(jù)集模塊進(jìn)行復(fù)制，調(diào)整滑動區(qū)域、數(shù)據(jù)集寬度即可）。

一、功能

鼠標(biāo)拖動滑輪進(jìn)行數(shù)據(jù)選擇，滑動結(jié)束后，選中數(shù)據(jù)居中。

二、制作方式

1. 制作基礎(chǔ)的靜態(tài)模塊

（注意元件命名，本案例涉及局部變量關(guān)聯(lián)元件，元件命名有利于查找對應(yīng)元件）。

2. 制作上遮蓋、選中、下遮蓋

上遮蓋、下遮蓋制作了一個模糊的效果，實際制作為對應(yīng)的矩形，填充漸變色（#FFFFFF（50%）–#FFFFFF（100%）），注意設(shè)置對應(yīng)的角度，下遮蓋為-90°，上遮蓋為90°。（圖以上遮蓋為例，選中漸變左側(cè)。）

選中效果：設(shè)置選中為對應(yīng)的純色矩形即可。（設(shè)置顏色主要是與背景有所區(qū)分，顏色可選APP主色或其它與背景有對比度的顏色）。

3. 制作數(shù)據(jù)集數(shù)據(jù)（中繼器基礎(chǔ)）

（1）繪圖區(qū)域拖入中繼器組件

（2）完成上下模糊區(qū)域

修改中繼器組件內(nèi)部為文本標(biāo)簽元件，調(diào)整字體元件的寬（375px）、高（35px），文本標(biāo)簽元件字體設(shè)置對齊為左右居中，上下居中。

• 默認(rèn)中繼器中是一個矩形可以手動刪除后拖入文本標(biāo)簽元件。
• 技巧：矩形快速變?yōu)槲谋緲?biāo)簽元件：移除矩形背景色、移除矩形描邊即可。

（3）配置中繼器數(shù)據(jù)關(guān)聯(lián)

• 設(shè)置每項加載時，文字為中繼器對應(yīng)list列表數(shù)據(jù)。
• list：中繼器表頭，自行修改（注：中繼器表頭目前不支持中文）。
• list數(shù)據(jù)：自行填寫（此處數(shù)據(jù)為滾動選擇器中的數(shù)據(jù)，可自行進(jìn)行填寫，目前需大于等于7。）

（4）交互整體原理

（5）配置滑動交互

實現(xiàn)原理：整個滑動交互分為兩層。

• 第一層：用戶鼠標(biāo)拖動滑動區(qū)域動態(tài)面板移動后，數(shù)據(jù)集動態(tài)面板跟隨移動。
• 第二層：當(dāng)滑動區(qū)域移動結(jié)束后，計算出滑動的數(shù)據(jù)距離，給數(shù)據(jù)集動態(tài)面板進(jìn)行計算并進(jìn)行上下對應(yīng)調(diào)整（保證文案居中）。

滑動區(qū)域高度計算：滑動區(qū)域比數(shù)據(jù)集區(qū)域高6個數(shù)據(jù)高度（取決于顯示滑動區(qū)域多少）。

所有可以在載入是計算滑塊區(qū)域的高度：滑塊區(qū)域高度=中繼器數(shù)據(jù)個數(shù)35+額外高出的高度（635）。

（6）配置滑動區(qū)域交互

• 配置滑動區(qū)域可拖動的范圍
• 按照滑塊區(qū)域頂部為依據(jù)，設(shè)置頂部可移動區(qū)域為:[-滑塊高度+245（7個滑動展示區(qū)域），0]。計算依據(jù)參考整體交互原理。

（7）配置數(shù)據(jù)移動區(qū)域與展示

• 設(shè)置數(shù)據(jù)集跟隨滑動區(qū)域移動
• 計算出滑動區(qū)域移動后，數(shù)據(jù)集需要移動多少進(jìn)行最后結(jié)果的調(diào)整。

計算方式：

滑動區(qū)域移動的距離取除35（單個數(shù)據(jù)高度）余數(shù)的整。然后進(jìn)行乘35。然后將數(shù)據(jù)區(qū)域約束在對應(yīng)的滾動區(qū)域中。計算依據(jù)參考整體交互原理。

總結(jié)

過程相對較為復(fù)雜，如果只是日常使用，下載對應(yīng)源文件更改數(shù)據(jù)即可，如果自行學(xué)習(xí)注意以下幾個交互：

1. 注意滑動區(qū)域計算與數(shù)據(jù)集跟隨計算；
2. 可以使用文本賦值展示交互的實際值進(jìn)行修改對應(yīng)的邏輯。

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

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