Axure想要制作一個表格內(nèi)容修改排序效果，上下行的交換，該怎么這個交互效果呢？下面我們就來看看詳細(xì)的教程。

Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊機+漢化包+安裝教程)

• 類型：輔助設(shè)計
• 大小：83.2MB
• 語言：簡體中文
• 時間：2019-04-26

查看詳情

 新建一個“中繼器”，如下圖所示：

“中繼器”設(shè)置2列：ID、content；可按所需設(shè)置行內(nèi)容； （ID是用來排序的，建議按數(shù)字順序設(shè)置），可參考下圖設(shè)置：

雙擊進(jìn)入“中繼器”內(nèi)部，先清除原來內(nèi)容；新建2個“文本標(biāo)簽”、1個“矩形”、1個“向上箭頭”的圖標(biāo)、1個“向下箭頭”的圖標(biāo)；如下圖所示：

設(shè)置一個“文本標(biāo)簽”為Num；

設(shè)置一個“文本標(biāo)簽”為content；

設(shè)置"矩形"尺寸：280*60；填充色：#CCCCCC

布局如下圖所示：

到這里，基礎(chǔ)的布局設(shè)置結(jié)束，以下是交互設(shè)置~

首先是“中繼器”的“每項加載時”的交互：

動作：

設(shè)置“文本標(biāo)簽：Num”的值：[[Item.index]]

設(shè)置“文本標(biāo)簽：content”的值：[[Item.content]]

如下圖所示：

”圖標(biāo)：向上箭頭“的”鼠標(biāo)單擊時“的交互：

條件：當(dāng)”值：[[Item.ID]]“大于1時，如下圖所示：

動作1：更新行：設(shè)置上一行的ID為本行ID）

更新條件：[[TargetItem.ID==Item.ID-1]]

更新”ID“列內(nèi)容：[[Item.ID]]

如下圖所示：

動作２：更新行：設(shè)置本行的ID，數(shù)值減１

更新條件：this（即本身）

更新”ID“列內(nèi)容：[[Item.ID-1]]

如下圖所示：

動作3：排序

針對”屬性：ID“排序；排序類型：Number；順序：升序；如下圖所示：

幾乎相同方式，設(shè)置”圖標(biāo)：向下箭頭“的”鼠標(biāo)單擊時“的交互：

條件：當(dāng)”值：[[Item.ID]]“小于”[[Item.Repeater.itemCount]]“時，如下圖所示：

動作1：更新行：設(shè)置下一行的ID為本行ID）

更新條件：[[TargetItem.ID==Item.ID+1]]

更新”ID“列內(nèi)容：[[Item.ID]]

如下圖所示：

動作２：更新行：設(shè)置本行的ID，數(shù)值加１，

更新條件：this（即本身）

更新”ID“列內(nèi)容：[[Item.ID+1]]

如下圖所示：

動作3：排序

針對”屬性：ID“排序；排序類型：Number；順序：升序；如下圖所示：

設(shè)置內(nèi)容還是比較少的，有些撓腦筋，需要仔細(xì)些即可，設(shè)置完畢后，就可以驗證效果如何~

以上就是axure制作表格內(nèi)容升降序列的教程，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

Axure怎么設(shè)計網(wǎng)頁強密碼驗證效果?

Axure怎么制作百分比的進(jìn)度條動畫?

Axure怎么制作控件隨鼠標(biāo)移動的效果?

最新評論