中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：本文作者從自身工作經(jīng)驗(yàn)出發(fā)，介紹中繼器中Item與TargetItem的區(qū)別，以及如何實(shí)現(xiàn)移動(dòng)行插入行的效果。本文適合對(duì)中繼器中的數(shù)據(jù)集與元件間的映射邏輯、更新行和添加排序有簡(jiǎn)單了解的讀者。

一、前言

在項(xiàng)目中因?yàn)橛幸苿?dòng)行和插入行的需求，為了更直觀、具體的體現(xiàn)該效果，便想在Axure中實(shí)現(xiàn)出來。

在網(wǎng)上搜索相關(guān)資料與教程，發(fā)現(xiàn)涉及到TargetItem對(duì)象，但沒有理解其應(yīng)用原因及原理，在深入了解了TargetItem對(duì)象后，最終實(shí)現(xiàn)了效果?，F(xiàn)把自己理解的總結(jié)出來，供大家參考。

二、效果

在上方插入：可在任意一行，點(diǎn)擊相應(yīng)圖標(biāo)后，在該行的上方插入一行。

在下方插入：可在任意一行，點(diǎn)擊相應(yīng)圖標(biāo)后，在該行的下方插入一行。

上移：可在任意一行（除第一行），點(diǎn)擊相應(yīng)圖標(biāo)后，將該行的上移一行。

下移：可在任意一行（除最后一行），點(diǎn)擊相應(yīng)圖標(biāo)后，將該行的下移一行。

三、思路

不難發(fā)現(xiàn)，四種效果本質(zhì)上都是“改變位置順序”。

如果我們把所有行的位置順序按12345…的“順序號(hào)”依次排下去。那么以“在下方插入”為例，如：在1下方插入一行，可以簡(jiǎn)單的分為三個(gè)步驟：

四、實(shí)現(xiàn)

按照以上思路，我們?cè)跀?shù)據(jù)集中增加一列“OrderNum”來存儲(chǔ)“順序號(hào)”。

可能這里有童鞋會(huì)問，為什么不直接用index? 因?yàn)閕ndex只能遞增，不能對(duì)其進(jìn)行排序。

第一步更新行

首先找到1下面的23456……

這就引出TargetItem的作用。從名稱上也能大概理解為“目標(biāo)項(xiàng)”。沒有“Target”前綴的Item，我們知道是指“當(dāng)前項(xiàng)”，如第一行的順序號(hào)Item.OrderNum=1。而應(yīng)用了條件時(shí)，TargetItem可以表示所有符合條件的項(xiàng)。所以23456……就是符合“在1下面”這個(gè)條件的TargetItem.OrderNum。

而“在1下面”這個(gè)條件要如何表達(dá)呢？我們發(fā)現(xiàn)1下面的23456…都是大于1的，所以條件可以這么寫:[[TargetItem.OrderNum>Item.OrderNum]]。

然后，把23456……都+1，即[[TargetItem.OrderNum+1]]。

也就是Axure會(huì)把每一項(xiàng)根據(jù)條件來判斷，符合條件，就執(zhí)行下方結(jié)果，不符合的就不動(dòng)。

第二步添加行

新增的一行順序號(hào)為2，即當(dāng)前行的順序號(hào)+1，也就是[[Item.OrderNum+1]]。

第三步添加排序

“在下方插入”效果就大功告成。

剩下的三個(gè)效果在上方插入行、上移和下移，大體類似，這里就不贅述了，在附件中附上源文件供大家參考。大家可以看看能不能按照以上思路把剩下的這三個(gè)效果實(shí)現(xiàn)。

五、最后

在效果實(shí)現(xiàn)的過程中難免會(huì)有一些問題，例如點(diǎn)擊沒效果，沒有按照預(yù)期的效果發(fā)展等，對(duì)此在不斷的調(diào)試和修改過程中，我總結(jié)了兩點(diǎn)：

實(shí)現(xiàn)過程中，變化數(shù)據(jù)可直接觀測(cè)。如例子中的OrderNum,雖然在最后界面呈現(xiàn)上不會(huì)出現(xiàn)，但是在繪制過程中，我們可以把它顯示在界面上，實(shí)時(shí)觀察做的對(duì)不對(duì)，最后再把它去掉即可。

一步一步來，不要一蹴而就。

如例子中要把23456…都+1，要先寫出[[TargetItem.OrderNum>Item.OrderNum]]的條件，再寫出[[TargetItem.OrderNum+1]]的結(jié)果，這個(gè)過程我們就可以把結(jié)果簡(jiǎn)單用某個(gè)數(shù)字代替，以此來先看看條件寫得對(duì)不對(duì)。

基本效果出來后，可以再進(jìn)行樣式等方面的優(yōu)化，比如該例子我還畫了個(gè)“豪華”版在附件中。

參考文章：https://www.axure.com.cn/76497/

本文由 @阿喊設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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