【Axure 教程】中繼器入門(mén)教程-頁(yè)面切換
編輯導(dǎo)讀:當(dāng)工作中需要進(jìn)行頁(yè)面切換操作時(shí),我們可以如何使用Axure來(lái)進(jìn)行相關(guān)操作呢?本篇文章里,作者利用中繼器為我們展示了頁(yè)面切換操作,讓我們一起來(lái)看一下。
原型展示:https://fn2xtz.axshare.com
所需原件:
- 中繼器
- 文本標(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é)議。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!