Axure教程：如何利用中繼器調(diào)整項目順序？

9 評論 6447 瀏覽 20 收藏 7 分鐘

中繼器項目的順序調(diào)整應(yīng)該怎么操作呢？本文給你分享經(jīng)驗！

這次的學(xué)習(xí)中，我是用QQ的界面管理器（QQ最小化左邊的按鈕中）作為案例進(jìn)行教學(xué)的，首先我們現(xiàn)需要先明確下交互的內(nèi)容：

然后呢，需要畫元件：

注意命名，防你不知道我在說什么。

  • sort：排序用的字段
  • selected：復(fù)選框的選中狀態(tài)
  • icon：每項前面的icon
  • name：每項的名字

中繼器右側(cè)的樣式中有背景交替選項，勾選后選2種顏色即可。

中繼器中的行，是由復(fù)選框btn_select、放文本用的矩形text，和無填充色的矩形transfer組成。

transfer不可以填色，不然中繼器交替背景顏色會被蓋住。給transfer增加交互樣式，選中時填充色變?yōu)榈仙?/p>

最后將整體選中，右鍵組合，命名為row。

最后還要增加1個全局變量“sort”來標(biāo)記當(dāng)前選中的項目是第幾項。

每項載入時

在每項載入時，我們需要做4個事情：

  1. 賦值文本。
  2. 根據(jù)sort選中當(dāng)前項的transfer改變背景色。
  3. 根據(jù)selected數(shù)據(jù)選中/取消選中復(fù)選框。
  4. 根據(jù)sort啟用/禁用對應(yīng)按鈕。

講道理，按照人腦邏輯，背景色和上下移按鈕的交互分別是在點擊選中和點上下移按鈕時候發(fā)生的事情，不應(yīng)該做在這里的，但是為什么我做在這里了呢？

因為在其他位置對變量改變后會更新每項重新載入，放在這里的話，更新行的時候順便就把背景色和上下移按鈕的狀態(tài)都更新了。

改變文本時要選用富文本，為icon和文本設(shè)置不同格式。

icon的字體要選專用的字體，例如我的icon字體是iconfont，不然在axure里看不到，后面的文本選普通字體即可。給二者設(shè)置放在一起協(xié)調(diào)的字號，富文本里看可能會很不協(xié)調(diào)，但在中繼器里看是不一樣的，以中繼器中顯示的預(yù)覽樣式為準(zhǔn)。

[[Item.Repeater.itemCount]]代表中繼器中項目的數(shù)量。

其他的沒什么難點，就不需要詳細(xì)解釋了。注意：哪里應(yīng)該是if哪里應(yīng)該是else if，要看清楚。

row

下面讓我們鉆到中繼器里面，看row的交互：

點擊時，要設(shè)置sort為index，中繼器中的index是數(shù)據(jù)行的索引編號。這個編號永遠(yuǎn)不會變，第1個就是1，第2個就是2，不隨數(shù)據(jù)內(nèi)容變化而變化。

改變變量之后再更新一下行，不修改任何內(nèi)容，單純的更新下，就會重新載入每項了，這時點擊改變背景色的效果就出來了。

btn_select

雖然將選中框也組合在row里面了，但是點選中框的時候并不會觸發(fā)row的交互。

在鼠標(biāo)單擊時，把sort=index的交互再做一次。

在選中時，需要更新當(dāng)前行，將selected數(shù)據(jù)改為1，取消選中時嘿將selected數(shù)據(jù)改為0。這樣在更新數(shù)據(jù)后，選中框的√才會保存下來，不然就會初始化為默認(rèn)的狀態(tài)。

上下移按鈕

下面就是最關(guān)鍵的移動按鈕交互了，先讓我們看上移按鈕。

點擊后我們需要讓當(dāng)前行的sort-1，上一行的sort+1，改完之后再改變sort告知最新的當(dāng)前sort是幾，再更新行重新載入每項。

但這樣有些麻煩，所以讓我們換個思路，先改變sort！

首先讓sort-1，就是將sort變?yōu)槲覀儺?dāng)前點擊的這行數(shù)據(jù)的上一項的代號。

更新→鼠標(biāo)點擊的行的上一行條件[[TargetItem.index==sort]]

更新sort=[[sort+1]]

更新→鼠標(biāo)點擊的行

條件[[TargetItem.index==sort+1]]

更新sort=[[sort]]

我知道這很難理解，給你們講這個我也很痛苦的！所以我畫了一個數(shù)據(jù)變化的圖，仔細(xì)看，你一定能懂！

最后，按照sort進(jìn)行升序排序，就成功把這這2項的順序交換過來啦。下移呢，也是同樣的思維方法。

這次課程的理解成本占比非常高，一定要靜下心來，聰明的你一定可以學(xué)會！

 

作者：Synmo夢兒，公眾號：夢話Axure

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

題圖來自 Pexels ，基于 CC0 協(xié)議

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
Synmo夢兒
公眾號：夢話Axure
3篇作品 22834總閱讀量
05-182676 瀏覽
抖音價格戰(zhàn)，“燒到”小縣城
02-101785 瀏覽
電子簽下半場：從熱鬧的風(fēng)口到分岔的路口
05-083731 瀏覽
小紅書電商的“第一口螃蟹”，9塊9包郵真香？
10-311034 瀏覽
“活不下去”的圍爐煮茶，換個“馬甲”又成頂流……
10-20660 瀏覽
如何成為難以替代的巔峰產(chǎn)品經(jīng)理？
評論
評論請登錄

  1. 怎么有兩個if啊 我axure9只有第一個是if 后面都是if else

    來自美國 回復(fù)

  2. 樓主，你好！學(xué)習(xí)了你的帖子，有不少收貨，非常感謝！在學(xué)習(xí)的過程中，我發(fā)現(xiàn)上移和下移不能進(jìn)行連續(xù)的操作，當(dāng)我將選中項移動之后，第1，row的交互還是停留在之前選擇的那行；第2，繼續(xù)點擊上移，又恢復(fù)的之前的排序。

    在上移和下移交互中，少了sort變量的更改，如果加上的話，上下移動就可以連續(xù)，并且row的選中顏色跟隨項目移動而發(fā)生變動

    來自重慶 回復(fù)

  3. 樓主中繼器中的icon列中放的是圖片還是什么 ?? 我搞不出來那個icon

    來自湖北 回復(fù)

    1. iconfont了解一下，不了解的話關(guān)注我公眾號了解下，里面有詳細(xì)的教程~

      來自北京 回復(fù)

  4. 能用到中繼器的，除了你們無聊的教學(xué)，現(xiàn)實工作中誰閑的蛋疼用這些玩意，都是能靜態(tài)靜態(tài)，能簡化簡化的

    來自浙江 回復(fù)

    1. 學(xué)習(xí)技術(shù)和邏輯，無關(guān)工作。

      來自北京 回復(fù)

    2. 其實培養(yǎng)好的技術(shù)邏輯思維，也是工作的一種進(jìn)階，贊樓主！

      來自廣東 回復(fù)

  5. 講述“每項載入時”時的“上下移按鈕”流程圖有誤，啟用禁用都寫btn_down。

    來自廣東 回復(fù)

    1. 復(fù)制粘貼的時候忘記改了，感謝指出。

      來自北京 回復(fù)