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

Sam
0 評論 2127 瀏覽 3 收藏 4 分鐘

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

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


所需原件:

  1. 中繼器
  2. 文本標簽

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

一、列表制作

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

二、翻頁設置

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

三、細節優化

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

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

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

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

反之,在其他情況下,設置“按鈕”為【啟用】狀態;

 

本文由@Sam 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash, 基于CC0協議。

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!