Axure入門案例系列 -- 中繼器左右交叉時間線

前言

時間線的連續(xù)性的展示淤击，可以更加友好的展現(xiàn)發(fā)展的時間節(jié)點匠抗。本文利用中繼器實現(xiàn)簡單的時間線流程

中繼器左右交叉時間線.gif

準(zhǔn)備

Axure 8（或Axure 9）軟件已安裝。
掌握基本的軟件使用污抬。

本教程知識點

初級的動態(tài)面板使用汞贸。
初級的頁面交互事件绳军、元件交互事件使用。
中級中繼器使用矢腻。

詳細教程--基礎(chǔ)輪播圖

功能

展示時間線门驾，數(shù)據(jù)可通過中繼器進行維護

制作方式

以簡答的縱向時間線為例進行制作。

1多柑、搭建基礎(chǔ)的頁面組成

數(shù)據(jù)部分由中繼器包裹動態(tài)面板
將數(shù)據(jù)分為左側(cè)與右側(cè)區(qū)分
數(shù)據(jù)內(nèi)容中包括

（1）背景
（2）垂直線
（3）橢圓標(biāo)志
（4）內(nèi)容（左側(cè)時間線奶是、右側(cè)時間線）：段落文本

注：段落文本可以進行自動換行，在平時進行制作時竣灌，遇到多行文本可以替換單行為多行聂沙，這樣就不會出現(xiàn)原型某些文字錯位的問題。

image.png

2初嘹、搭建基礎(chǔ)內(nèi)容

創(chuàng)建動態(tài)面板：左側(cè)及汉、右側(cè)。分別進行對應(yīng)內(nèi)容處理屯烦。
背景：完全填充
垂直線：與背景等高居中
橢圓標(biāo)志：居中
段落文本：
（1）左側(cè)：設(shè)置文本上下居中坷随，左右居右。同時設(shè)置周邊10PX填充（保證留有間隔）驻龟。
（2）右側(cè)：設(shè)置文本上下居中温眉，左右居左。同時設(shè)置周邊10PX填充翁狐。

小技巧：在設(shè)計橢圓標(biāo)志與垂直線時芍殖，由于垂直線為1PX的線條元件，所以在制作橢圓時谴蔑，要采用奇數(shù)的半徑豌骏，這樣就可以完美的展示均分。若線為2PX隐锭，需采用偶數(shù)的半徑窃躲。

3、交互處理：如何實現(xiàn)加載進行左右數(shù)據(jù)呈現(xiàn)

本次采用判斷中繼器的奇钦睡、偶行加載對應(yīng)的動態(tài)面板蒂窒。

image.png

偶數(shù)行設(shè)置為左側(cè)交互加載。
設(shè)置判斷觸發(fā)條件荞怒。
設(shè)置中繼器動態(tài)面板洒琢。
設(shè)置中繼器數(shù)據(jù)的賦值。

儲備知識：

isEven 用途：判斷數(shù)據(jù)行是否為偶數(shù)行褐桌；如果是偶數(shù)行衰抑，返回值為“True”，否則為“False”荧嵌。

isOdd 用途：判斷數(shù)據(jù)行是否為奇數(shù)行呛踊；如果是奇數(shù)行砾淌，返回值為“True”，否則為“False”谭网。

3汪厨、其它完善

個人與社團的切換就是常規(guī)的雙動態(tài)面板聯(lián)動切換。
數(shù)據(jù)填充注意數(shù)據(jù)有效長度愉择，中繼器中的數(shù)據(jù)輸入恰當(dāng)劫乱。

總結(jié)

本文主要使用了中繼器的奇、偶行的函數(shù)锥涕，進行了業(yè)務(wù)邏輯的套用要拂。
同時在中繼器中套用了動態(tài)面板展示了不同的狀態(tài)區(qū)間。

原文鏈接：https://fuzuobiao.com/articledetail/5f6a0d20d4e9525bf354109d

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者