【Axure 教程】中繼器入門教程-頁面切換

Sam
0 評論 4422 瀏覽 7 收藏 4 分鐘

編輯導(dǎo)讀:當(dāng)工作中需要進行頁面切換操作時,我們可以如何使用Axure來進行相關(guān)操作呢?本篇文章里,作者利用中繼器為我們展示了頁面切換操作,讓我們一起來看一下。

原型展示:https://fn2xtz.axshare.com


所需原件:

  1. 中繼器
  2. 文本標(biāo)簽

本文主要講解中繼器的基本用法,以便大家更容易去理解和學(xué)習(xí)中繼器的高級用法,入門教程會分為 6 個小節(jié),本節(jié)主要講解如何通過中繼器快速制作翻頁效果

一、列表制作

這里我們直接引用課程 【Axure 教程】中繼器入門教程-卡片制作 中制作的卡片列表,并修改布局【每行項數(shù)量】為【2】,如上圖所示;

二、翻頁設(shè)置

拖入兩個文本標(biāo)簽,編輯為【上一頁】和【下一頁】,并創(chuàng)建交互:【點擊時】分別設(shè)置當(dāng)前顯示頁面為【上一項】和【下一項】,如上圖所示;預(yù)覽即可查看卡片的翻頁效果;

三、細節(jié)優(yōu)化

最后,我們希望如果當(dāng)前頁面是第一頁,則【上一頁】操作禁用;如果當(dāng)前頁面是最后一頁,則【下一頁】操作禁用;

首先在中繼器載入時,若中繼器當(dāng)前頁面為【1】,則禁用【上一頁】,如上圖;

然后在點擊【下一頁】時,若 [[This.pageIndex]]==[[This.pageCount-1]] 時,即當(dāng)前頁面為倒數(shù)第二頁時點擊【下一頁】,禁用【下一頁】;

最后在點擊【上一頁】時,若 [[This.pageIndex]]==2 時,即當(dāng)前頁面為第二頁時點擊【上一頁】,禁用【上一頁】;

反之,在其他情況下,設(shè)置“按鈕”為【啟用】狀態(tài);

 

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

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

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