單頁中繼器調(diào)整排序極其簡單的方法

0 評(píng)論 5310 瀏覽 5 收藏 7 分鐘

中繼器上下調(diào)整排列順序,網(wǎng)上的教程大同小異,但交互比較復(fù)雜,有沒有什么辦法可以一步到位呢?作者總結(jié)了一個(gè)簡單的方法,與你分享,希望對你有所幫助。

關(guān)于中繼器上下調(diào)整排列順序,目前網(wǎng)上的教程都大同小異,交互也蠻復(fù)雜的,需要記錄移動(dòng)的格數(shù),還有判斷移動(dòng)后的各種情形。那有沒有什么方法可以無腦的一步到位呢?今天教大家針對單頁中繼器排序一個(gè)極其簡單的方法。

一、準(zhǔn)備

一般我演示排序喜歡用英文兒歌,A for Apple B for Ball……,英文字母本身也自帶順序嘛,這里我把單詞換成了Axure相關(guān)的。所以先準(zhǔn)備一個(gè)中繼器,把默認(rèn)的?[[Item.Column0]]?字段改為?[[Item.Alphabet]]?里面填入以下英文兒歌。再準(zhǔn)備個(gè)?[[Item.Sort]]?字段,填上數(shù)字1、2、3……用來做排序。

再準(zhǔn)備一個(gè)向上圖標(biāo)、一個(gè)向下圖標(biāo),全部元件結(jié)構(gòu)如下。

中繼器的交互如下,添加?[[Item.Sort]]?字段按照 Number 排序,如果你的Axure顯示不是?Number?(而是:數(shù)字、數(shù)值等),那可能會(huì)因?yàn)闈h化包導(dǎo)致排序無效:

二、分析

假如我們想讓J字母向上移動(dòng)一行,傳統(tǒng)的解決辦法要先做各種判斷,最終核心操作是這兩步:

  1. 把J字母的 [[Item.Sort]] 減1
  2. 把I字母的 [[Item.Sort]] 加1

那么,問題來了:“如果我們直接把J字母,放到H和I之間去,是不是更高效呢?”

三、0.5的魔法

我們直接把J字母的?[[Item.Sort]]?減1.5不就好了嘛!你就說10-1.5=8.5,是不是在8和9之間?

這時(shí)很多讀者要懟我了:“加減1.5后出現(xiàn)負(fù)數(shù)或者超出中繼器行數(shù)怎么辦?”,答案是“涼拌!”

請?jiān)僮屑?xì)想一下,負(fù)數(shù)了是不是還排在首位?超出中繼器行數(shù)了是不是還排在末位?

所以只要確保順序正確,我們唯一要去做的,就是重置排序列為正確的值。

四、教程

現(xiàn)在我們要加按鈕的交互了,先操作向上按鈕,前面分析過,先做第一步加減1.5。

向上按鈕的交互是:

預(yù)覽一下,發(fā)現(xiàn)點(diǎn)擊第一次的效果很好,多次點(diǎn)擊就亂套了,因?yàn)闆]有重制?[[Item.Sort]]?列。

繼續(xù),向上按鈕的交互改往為:

再預(yù)覽一下,這次翻車了,動(dòng)都不動(dòng)[笑哭]。

中繼器并沒有按照我們設(shè)想的那樣重置序號(hào),問題出在哪里了呢?

五、等待0毫秒(wait 0 ms)的妙用

原因是第一次更新行后,中繼器沒有自動(dòng)刷新,順序并沒有改變,所以重置序號(hào)時(shí)還是原來的順序,表現(xiàn)出的效果當(dāng)然是不動(dòng)啦。

刷新中繼器或是全量更新中繼器有很多種方法,但是如果不增加額外的外部元件的話,要屬(等待0毫秒)最好用了。

其實(shí)我們只要在兩次“更新行”中間加上“等待0毫秒(wait 0 ms)”就行了,向上按鈕的交互繼續(xù)優(yōu)化為:

然后再補(bǔ)齊向下按鈕的交互。

預(yù)覽測試一下,這次就完全OK了,預(yù)覽:https://usrsky.axshare.com/#id=06kecq&g=1。

六、進(jìn)階

請自行嘗試“向上/下移動(dòng)5行”、“置頂/置底”的交互。

七、總結(jié)

雖然跟其他方法一樣要更新兩次中繼器,但這種方法更“無腦”,不需要復(fù)雜的邏輯判斷,只要先把需要調(diào)整的行放在正確的位置上,然后重置序號(hào)即可。

  • 向上移動(dòng)N行,更新?[[Item.Sort]]?列為 [[Item.Sort – N – 0.5]],然后重置序號(hào)。
  • 向下移動(dòng)N行,更新?[[Item.Sort]]?列為 [[Item.Sort + N + 0.5]],然后重置序號(hào)。
  • 置頂,更新?[[Item.Sort]]?列為 0.5,然后重置序號(hào)。
  • 置底,更新?[[Item.Sort]]?列為 [[Item.Repeater.dataCount + 0.5]],然后重置序號(hào)。

八、適用范圍及警告

因?yàn)橹欣^器里的?[[Item.index]]?只對當(dāng)前顯示頁有效,所以更適合單頁的中繼器展示。

如果是分頁的中繼器,還需要加上 [[每頁項(xiàng)數(shù)量*(當(dāng)前頁碼-1)]],所以并不推薦新手使用。

如果你的中繼器有“篩選”,那這個(gè)方法完全不適用

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

題圖來自 Unsplash,基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!