Axure入門(mén)案例系列-手機(jī)端滾動(dòng)選擇器

Axure入門(mén)案例系列——手機(jī)端滾動(dòng)選擇器效果展示：準(zhǔn)備：Axure8（或Axure9）軟件已安裝，掌握基本的軟件使用，掌握基礎(chǔ)的動(dòng)態(tài)面板知識(shí)。本教程知識(shí)點(diǎn)：進(jìn)階的動(dòng)態(tài)面板使用?；A(chǔ)函數(shù)應(yīng)用?；A(chǔ)中繼器應(yīng)用。本文以基礎(chǔ)的單一選擇為例（多選擇可以將滑動(dòng)區(qū)域、數(shù)據(jù)集模塊進(jìn)行復(fù)制，調(diào)整滑動(dòng)區(qū)域、數(shù)據(jù)集寬度即可）。一、功能鼠標(biāo)拖動(dòng)滑輪進(jìn)行數(shù)據(jù)選擇，滑動(dòng)結(jié)束后，選中數(shù)據(jù)居中。二、制作方式1.制作基礎(chǔ)的靜態(tài)模塊（注意元件命名，本案例涉及局部變量關(guān)聯(lián)元件，元件命名有利于查找對(duì)應(yīng)元件）。2.制作上遮蓋、選中、下遮蓋上遮蓋、下遮蓋制作了一個(gè)模糊的效果，實(shí)際制作為對(duì)應(yīng)的矩形，填充漸變色（#FFFFFF（50%）–#FFFFFF（100%）），注意設(shè)置對(duì)應(yīng)的角度，下遮蓋為-90°，上遮蓋為90°。（圖以上遮蓋為例，選中漸變左側(cè)。）選中效果：設(shè)置選中為對(duì)應(yīng)的純色矩形即可。（設(shè)置顏色主要是與背景有所區(qū)分，顏色可選APP主色或其它與背景有對(duì)比度的顏色）。3.制作數(shù)據(jù)集數(shù)據(jù)（中繼器基礎(chǔ)）（1）繪圖區(qū)域拖入中繼器組件（2）完成上下模糊區(qū)域修改中繼器組件內(nèi)部為文本標(biāo)簽元件，調(diào)整字體元件的寬（375px）、高（35px），文本標(biāo)簽元件字體設(shè)置對(duì)齊為左右居中，上下居中。默認(rèn)中繼器中是一個(gè)矩形可以手動(dòng)刪除后拖入文本標(biāo)簽元件。技巧：矩形快速變?yōu)槲谋緲?biāo)簽元件：移除矩形背景色、移除矩形描邊即可。（3）配置中繼器數(shù)據(jù)關(guān)聯(lián)設(shè)置每項(xiàng)加載時(shí)，文字為中繼器對(duì)應(yīng)list列表數(shù)據(jù)。list：中繼器表頭，自行修改（注：中繼器表頭目前不支持中文）。list數(shù)據(jù)：自行填寫(xiě)（此處數(shù)據(jù)為滾動(dòng)選擇器中的數(shù)據(jù)，可自行進(jìn)行填寫(xiě)，目前需大于等于7。）（4）交互整體原理（5）配置滑動(dòng)交互實(shí)現(xiàn)原理：整個(gè)滑動(dòng)交互分為兩層。第一層：用戶鼠標(biāo)拖動(dòng)滑動(dòng)區(qū)域動(dòng)態(tài)面板移動(dòng)后，數(shù)據(jù)集動(dòng)態(tài)面板跟隨移動(dòng)。第二層：當(dāng)滑動(dòng)區(qū)域移動(dòng)結(jié)束后，計(jì)算出滑動(dòng)的數(shù)據(jù)距離，給數(shù)據(jù)集動(dòng)態(tài)面板進(jìn)行計(jì)算并進(jìn)行上下對(duì)應(yīng)調(diào)整（保證文案居中）。滑動(dòng)區(qū)域高度計(jì)算：滑動(dòng)區(qū)域比數(shù)據(jù)集區(qū)域高6個(gè)數(shù)據(jù)高度（取決于顯示滑動(dòng)區(qū)域多少）。所有可以在載入是計(jì)算滑塊區(qū)域的高度：滑塊區(qū)域高度=中繼器數(shù)據(jù)個(gè)數(shù)35+額外高出的高度（635）。（6）配置滑動(dòng)區(qū)域交互配置滑動(dòng)區(qū)域可拖動(dòng)的范圍按照滑塊區(qū)域頂部為依據(jù)，設(shè)置頂部可移動(dòng)區(qū)域?yàn)?[-滑塊高度+245（7個(gè)滑動(dòng)展示區(qū)域），0]。計(jì)算依據(jù)參考整體交互原理。（7）配置數(shù)據(jù)移動(dòng)區(qū)域與展示設(shè)置數(shù)據(jù)集跟隨滑動(dòng)區(qū)域移動(dòng)計(jì)算出滑動(dòng)區(qū)域移動(dòng)后，數(shù)據(jù)集需要移動(dòng)多少進(jìn)行最后結(jié)果的調(diào)整。計(jì)算方式：滑動(dòng)區(qū)域移動(dòng)的距離取除35（單個(gè)數(shù)據(jù)高度）余數(shù)的整。然后進(jìn)行乘35。然后將數(shù)據(jù)區(qū)域約束在對(duì)應(yīng)的滾動(dòng)區(qū)域中。計(jì)算依據(jù)參考整體交互原理?？偨Y(jié)過(guò)程相對(duì)較為復(fù)雜，如果只是日常使用，下載對(duì)應(yīng)源文件更改數(shù)據(jù)即