Axure 教程:中繼器高級用法——列表復(fù)選

Sam
9 評論 6551 瀏覽 17 收藏 6 分鐘

編輯導(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é)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 沒有說明[[State]]是哪里來的。。。。。。

    來自上海 回復(fù)
  2. 還有一個問題:教程里沒有說 Count 是哪個元件。

    來自上海 回復(fù)
  3. 老師好~~~請問這是哪個版本Axure?

    來自上海 回復(fù)
  4. Conut后面用的是什么表達(dá)式啊,愣是沒找到

    來自河南 回復(fù)
    1. [[Item.Repeater.itemCount-2]]、[[Item.Repeater.itemCount*(-1)+2]] 這兩個表達(dá)式?
      +

      來自廣東 回復(fù)
    2. 是的

      來自河南 回復(fù)
  5. 看不懂啊

    來自河南 回復(fù)
    1. 是有點(diǎn)難度的,一步一步跟著做試試看吧

      來自廣東 回復(fù)
  6. 更多內(nèi)容,微信搜索“愛學(xué)兒”,一起交流探討吧!

    來自廣東 回復(fù)