大家經(jīng)常會(huì)看到這樣的功能設(shè)計(jì)：可以多選，但是限制多選。比如某招聘網(wǎng)站城市的選擇只能選擇5個(gè)。再選擇第6個(gè)的時(shí)候會(huì)提示最多只能選擇5項(xiàng)。

這個(gè)效果是我們經(jīng)常會(huì)遇到的，在工作中也經(jīng)常會(huì)遇到需要制作這樣的效果。今天我們一起來看看，這個(gè)交互效果可以怎么做。

?

這個(gè)效果具體是怎樣的呢？

1、選擇地區(qū)，所選擇的地區(qū)顯示在選中欄中

2、選擇到規(guī)定數(shù)量之后，再選擇，顯示提示

3、刪除原選擇項(xiàng)，即可再進(jìn)行項(xiàng)目選擇。

?

這里咱們不做5個(gè)選項(xiàng)那么多了，先做3個(gè)吧，明白制作原理之后依次類推即可。

?

1

簡單地搭建一下場(chǎng)景，制作選項(xiàng)

接著把選擇地區(qū)的顯示框和提示隱藏掉，在進(jìn)行某個(gè)交互操作的時(shí)候再將它們顯示出來。

2

進(jìn)行交互設(shè)置

?

首先是效果1：選擇地區(qū)，所選擇的地區(qū)顯示在選中欄中

?

這個(gè)比較簡單。點(diǎn)擊第一個(gè)城市時(shí)，如果第一個(gè)顯示框中沒有內(nèi)容，則城市名顯示在第一個(gè)框中，如果已有內(nèi)容，則顯示在第二個(gè)框中，依次類推。

?

所以需要用到用例條件：空、文字于 1 != 文字于 This、文字于 2 != 文字于 This等三種

?

在判斷之后，顯示相應(yīng)的顯示框，并且設(shè)置中相應(yīng)的顯示框的文字等于該部件的文字即可

?

?

?

接著設(shè)置效果2：選擇到規(guī)定數(shù)量之后，再選擇，顯示提示

?

上一步的條件設(shè)置的是前三次的點(diǎn)擊，在進(jìn)行第四次的點(diǎn)擊的時(shí)候，我們需要設(shè)置顯示提示。那么問題來了，如何判斷點(diǎn)擊的次數(shù)呢？

?

對(duì)了，利用全局變量。我們?cè)O(shè)置全局變量的默認(rèn)值為0，在前三次點(diǎn)擊的時(shí)候，每一次點(diǎn)擊都將這個(gè)值加1。在判斷條件的時(shí)候也將其作為判斷依據(jù)

在第四次點(diǎn)擊，即設(shè)置條件4的時(shí)候，判斷全局變量的值是否大于2（或者大于等于3），顯示提示。

?

?

最后設(shè)置效果3：刪除原選擇項(xiàng)，即可再進(jìn)行項(xiàng)目選擇。

在刪除原選項(xiàng)的時(shí)候，與添加時(shí)相反，將全局變量的值減去1即可。在減去的同同時(shí)，不要忘了，顯示框會(huì)發(fā)生變化。

?

這里采用的做法是將前一個(gè)顯示框中的文字顯示為后一個(gè)顯示框中的文字。比如，第一個(gè)選擇的是廣州，第二個(gè)選擇的是深圳。

假如這時(shí)刪除廣州，則原來顯示廣州的位置顯示為深圳，深圳則顯示為空白，并且隱藏。

?

?

注意這里不能將第一個(gè)顯示框直接隱藏，需要做出調(diào)整。也可隱藏后將部件的位置進(jìn)行移動(dòng)，這種方法如果有興趣可以試試看。

?

在一個(gè)部件上將交互設(shè)置好，確認(rèn)無誤之后直接復(fù)制到其他部件上即可，可以節(jié)省我們很多

時(shí)間。

?

設(shè)置完成了，具體的效果大家可以點(diǎn)擊預(yù)覽查看：https://gdndfj.axshare.com

?

有限的選擇在很多交互設(shè)置上都常見，分析的過程和設(shè)置的思路基本都是類似，掌握了之后就可以廣泛使用了。

?