Axure 教程:中繼器高級用法——列表復(fù)選
編輯導(dǎo)語:當(dāng)工作中需要進(jìn)行列表復(fù)選操作時,我們可以如何使用Axure來進(jìn)行相關(guān)操作呢?本篇文章里,作者利用中繼器為我們展示了列表復(fù)選操作,讓我們一起來看一下。
原型展示:https://vqrnj1.axshare.com
所需元件:
- 中繼器:表單制作;
- 文本框:表頭制作;
- 復(fù)選框:復(fù)選交互制作。
思路:基于中繼器中的復(fù)選狀態(tài)進(jìn)行賦值,并基于整體列表的狀態(tài)值進(jìn)行換算,得出全選的臨界值公式。
教程如下。
一、中繼器的復(fù)選賦值
因列表載入時,默認(rèn)均為未選中狀態(tài),且初期設(shè)定為“未選中”時,狀態(tài)值為“-1”,“已選中”時,狀態(tài)值為“1”,因此狀態(tài)值在載入時,賦值為“-1”。
如上圖,設(shè)置復(fù)選框未選中時,在進(jìn)行點(diǎn)擊時,設(shè)置復(fù)選框?yàn)椤耙堰x”狀態(tài),同時給予狀態(tài)值賦予 [[State*(-1)]];即在“未選中”狀態(tài)時,將狀態(tài)切換到“已選中”狀態(tài)時,將狀態(tài)值設(shè)置為“1”。
同理,在選中時,給予狀態(tài)值賦予 [[State*(-1)]];即在“已選中”狀態(tài)時,將狀態(tài)切換到“未選中”狀態(tài)時,將狀態(tài)值設(shè)置為“-1”。
二、匯總中繼器中的狀態(tài)值
當(dāng)狀態(tài)值發(fā)生變化時,更新狀態(tài)值的總值,公式如下:[[Count.slice(0)-Exstate+State]]。
前狀態(tài)值在狀態(tài)值發(fā)生變化時,通過賦值獲取,如上圖所示。
三、設(shè)置全選操作時的狀態(tài)及賦值
需要注意的是,當(dāng)全選設(shè)置在“中間”狀態(tài)切換到“全選”狀態(tài)時,需要將中繼器中的狀態(tài)值,統(tǒng)一設(shè)置為“1”。
四、計算中繼器中復(fù)選框?qū)θx框的影響臨界值
在【第三步】當(dāng)中,我們已經(jīng)可以獲取到狀態(tài)值在每次變化時的總數(shù),因此通過這個總數(shù)去判斷中繼器中何時會影響到全選框的狀態(tài);判斷條件如下:
當(dāng)中繼器中的復(fù)選框從“未選”設(shè)置為“已選”狀態(tài)時,若滿足條件 [[Item.Repeater.itemCount-2]],則需要將全選框同步設(shè)置為“選中”狀態(tài),否則,僅需將全選框設(shè)置為“中間”狀態(tài)。
當(dāng)中繼器中的復(fù)選框從“已選”設(shè)置為“未選”狀態(tài)時,若滿足條件 [[Item.Repeater.itemCount*(-1)+2]],則需要將全選框同步設(shè)置為“未選”狀態(tài),否則,僅需將全選框設(shè)置為“中間”狀態(tài)。
本文由@Sam 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash, 基于CC0協(xié)議。
沒有說明[[State]]是哪里來的。。。。。。
還有一個問題:教程里沒有說 Count 是哪個元件。
老師好~~~請問這是哪個版本Axure?
Conut后面用的是什么表達(dá)式啊,愣是沒找到
[[Item.Repeater.itemCount-2]]、[[Item.Repeater.itemCount*(-1)+2]] 這兩個表達(dá)式?
+
是的
看不懂啊
是有點(diǎn)難度的,一步一步跟著做試試看吧
更多內(nèi)容,微信搜索“愛學(xué)兒”,一起交流探討吧!