【Axure 教程】中繼器入門(mén)教程-頁(yè)面切換

Sam
0 評(píng)論 4613 瀏覽 7 收藏 4 分鐘

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

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


所需原件:

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

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

一、列表制作

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

二、翻頁(yè)設(shè)置

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

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

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

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

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

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

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

 

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

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

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