Axure教程:滑動(dòng)選擇數(shù)值

1 評(píng)論 5764 瀏覽 9 收藏 4 分鐘

編輯導(dǎo)語:選擇數(shù)值時(shí),可以通過鼠標(biāo)滑動(dòng)左右來選擇。本文作者分享了用Axure制作滑動(dòng)選擇數(shù)值的方法,感興趣的小伙伴們一起來看一下吧。

本次分享的是滑動(dòng)選擇數(shù)值案例:

預(yù)覽及下載地址:https://ef8qxl.axshare.com

一、制作原型

制作12個(gè)矩形,分別命名為:1、2、3、4、5、6、7、8、9、10、11、12。

制作一條橫線,命名為:水平線

制作輸一個(gè)輸入框,命名為:數(shù)值

制作一個(gè)動(dòng)態(tài)面板,命名為:移動(dòng)

在面板里制作一個(gè)指針,拖動(dòng)一個(gè)矩形,命名為:移動(dòng)光標(biāo),設(shè)置成自己喜歡的形狀,如圖:

制作一個(gè)矩形,命名為:顯示,可以設(shè)置成自己喜歡的形狀和顏色,并設(shè)置為隱藏狀態(tài),如圖:

最后制作成如圖:

所有的制作完成,接下來進(jìn)行交互設(shè)置。

二、交互設(shè)置

對(duì)動(dòng)態(tài)面板“移動(dòng)”進(jìn)行“移動(dòng)時(shí)”事件和“拖動(dòng)時(shí)”事件進(jìn)行設(shè)置:

對(duì)矩形“移動(dòng)光標(biāo)”進(jìn)行“鼠標(biāo)按下時(shí)”事件和“鼠標(biāo)松開時(shí)”事件進(jìn)行設(shè)置:

所有的設(shè)置完畢。

 

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

題圖來自 unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 太太有用啦,又學(xué)習(xí)到一個(gè)新的技能——滑動(dòng)選擇數(shù)值。感謝作者,收藏啦。

    來自浙江 回復(fù)