這就是我下面要分享給大家的內容啦：

首先為大家回顧傳統選項卡的制作過程，再展示可滾動頁簽的選項卡制作過程。

一、最常見的傳統選項卡

最常見的選項卡，一般有三四個頁簽，分別對應各自頁面，通過鼠標點擊頁簽，來切換到相應的頁面。

幾個關鍵步驟如下：

1. 準備元素

準備幾個矩形(作為頁簽)和一個動態面板(狀態數與矩形數相同)。

2. 設置選項組

全選所有矩形，在鼠標右鍵的“設置選項組”菜單中或頁面右側屬性欄中鍵入選項組名稱。設置為同一個選項組的元素，一次只能選中一個。

3. 為頁簽設置“鼠標單擊時”事件

單獨為每個矩形設置鼠標單擊時事件：

①選中當前元件；②設置動態面板的狀態為對應的狀態頁(設好一個矩形的事件后可直接將事件復制到其他矩形上，再進行事件微調)。

4. 優化樣式

為動態面板中每個狀態下添加一些示意文字作為區分。

至此預覽原型，已經達到了點擊選項卡頁簽切換選項卡的效果。為了樣式更美觀，全選所有頁簽矩形，為其添加選中效果(添加懸停和按下效果后原型會更生動)；為動態面板添加邊框，并為其切換添加過渡效果。

5. 預覽效果

二、可滾動頁簽的選項卡

當頁簽的個數過多時(如10個)，可能頁面樣式不允許我們把所有頁簽都平鋪開展示，這時需要將后面的頁簽隱藏，需要點擊時再讓其展示。

由于頁簽處需要做出滾動效果，故在上述步驟中的頁簽選中效果和事件需要做出一些變化。

幾個關鍵步驟如下：

1. 微調樣式并新增元素

修改上面為頁簽設置的選中效果，主要是把邊框樣式去掉了。取而代之的是增加了一個小矩形藍條，與頁簽同寬，高度3px，默認先擺放在第一個頁簽的下邊框處對齊。

這個小藍條是為了之后在進行頁簽的滾動時，達到同步滑動至所選頁簽的效果。

2. 創建移動面板

將動態面板的狀態增加為10個，并將選項卡的頁簽增加為10個。

全選所有頁簽和小藍條，右鍵點擊“轉換為動態面板”，將該動態面板命名為“移動面板”，并選擇“自動調整為內容尺寸”。

此時“移動面板”內部包含10個頁簽和1個小藍條：

3. 創建外部面板

右鍵“移動面板”，將該動態面板再轉換為動態面板，并命名為“外部面板”，不勾選“自動調整為內容尺寸”，將尺寸調整為和下方動態面板同寬。

此時“外部面板”內部包含“移動面板”：

4. 設置“小藍條”移動的關鍵事件

(1)選中第一個選項卡頁簽，雙擊打開其鼠標單擊時事件窗口

在左側找到“移動”，在右側輸入框中輸入“小藍條”(之前已經將小矩形命名為“小藍條”)，在下方勾選“小藍條”。

(2)在下方的移動下拉框處選擇“絕對位置”，點擊x坐標的“fx”標識，打開編輯值窗口

在上面的變量或函數輸入區域中，輸入值為[[This.x]]。y坐標與x坐標同理設置，輸入值為[[This.y+This.height-3]]。在下方的動畫下拉框處選擇“線性”，250毫秒。

上述設置的含義為：點擊某個頁簽時，移動小藍條到絕對位置：x坐標=該頁簽的x坐標；y坐標=該頁簽的y坐標+該頁簽的高度-3。

這里減3是因為小藍條的高度為3px，為了后期通用也可以通過局部變量獲取小藍條的高度，替換這里的“3”。

5. 設置“移動面板”自動水平移動的關鍵事件

(1)接下來需要做的就是當點擊頁簽時，跟隨所點擊的頁簽自動水平左右移動“移動面板”，達到可以來回切換10個頁簽的效果

通過分析可知，這里頁簽默認展示的是5個，則：

①我們讓其點擊第1、2、3個頁簽時，“移動面板”的位置在當前位置，即坐標為(0,0)；

②當點擊第4、5、6、7、8個頁簽時，“移動面板”的位置往左移動一個頁簽寬度的距離(通過局部變量，獲取當前頁簽的寬度為[[This.width]])，即坐標分別為(-[[This.width]],0),(-[[This.width]]*2,0),(-[[This.width]]*3,0),(-[[This.width]]*4,0),(-[[This.width]]*5,0)

③當點擊第9、10個頁簽時，“移動面板”保持在(-[[This.width]]*5,0)。按上述規則為每個頁簽添加鼠標點擊事件，移動“移動面板”。

(2)至此，可滾動的多頁簽選項卡就基本完成啦，預覽一下效果：

可以發現點擊每個頁簽時，都可以保證所點擊頁簽的前后幾個頁簽都能一起展示，方便美觀。

下面是我在APP原型中應用上述方法做的一個搜索首頁，下方的文檔選項卡可以鼠標拖動上滑加載，還可以點擊右側的小“+”號進行頁簽的增刪。(具體增刪效果未做全，僅示意使用)

歡迎大家交流！

總結

以上是生活随笔為你收集整理的axure没有团队页签_Axure教程：多页签可滚动的选项卡制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。