本文簡要地為大家展示了，如何Axure8.0模擬縱向滑動的效果，enjoy~

好長時間不怎么玩兒Axure了，以至于很多功能都有點(diǎn)快忘記了，今天下午無聊就想在網(wǎng)上找了一圈關(guān)于Axure怎么做縱向滑動的，終于找到了一個寫的挺詳細(xì)的，但是定義了很多的變量，加上功能還不是很全面，這可難為死處女座的我了，于是我潛下心來花了十五分鐘，做出來了個我自認(rèn)為還可以又簡單易懂的教程，供大家學(xué)習(xí)Axure。

但是還是有點(diǎn)小bug，bug的根源是如果原型的起始點(diǎn)不是（0.0）的時候拖動的時候有問題，我還沒有想到怎么解決。有大腿會的話留言和我說下！

首先放源文件鏈接：https://pan.baidu.com/s/1aIWrqYjLHTTdRwBbq8wHcw 提取碼：v79h

第一步：準(zhǔn)備工作

先準(zhǔn)備一個動態(tài)面板兩個底部的ico，我懶就隨便弄了倆矩形，然后，給命名成tab1和tab2。這里沒放圖，是元件命名的那個地方；然后給動態(tài)面板起個名字——page1。

里面兩個狀態(tài)頁面默認(rèn)的就好，我這里是state1和state2，話不多，上圖：

動態(tài)面板的里面很簡單，把動態(tài)面板里面的內(nèi)容組合起來命名為page_tab1和page_tab2，就和上面顯示出來的差不多，但是要比動態(tài)面板的長度要高一點(diǎn)，就不放圖了。

第二步：開始寫交互事件

2.1 左右滑動事件

選中動態(tài)面板，屬性>向左拖動結(jié)束>添加條件>選中狀態(tài)，這里選擇tab1值等于ture。

既然要滑動肯定要有動態(tài)切換，設(shè)置動態(tài)面板page1的選擇狀態(tài)為state2，動畫可以根據(jù)自己喜好來加，看其他人的教程都沒有考慮過下面這兩個tab的切換問題，所以我寫了這個教程。

頁面已經(jīng)切換了，那么底部的TabBar的狀態(tài)當(dāng)然要變更，這就就是設(shè)置下面的選中狀態(tài)為tab2。

最后移動page_tab2移動到（0.0）意思就是切換的時候刷新頁面，不想刷新可以不設(shè)置，這里只放一個綜合的，話不多看圖：

然后同理在設(shè)置一遍向左滑動時候狀態(tài).

2.2 上下滑動事件

首先和左右滑動一樣 先判斷選中狀態(tài)，和上面的一樣，我就不上圖了。

選擇移動，當(dāng)動態(tài)面板選中的是state1的話，就選擇state1里面的那個頁面，里面的組合頁面我這里是page_tab1。

接下來需要給上下滑動添加一個界限，我這里用的變量，頂部使用小于等于，底部使用大于等于，當(dāng)然也可以使用絕對位置，為了裝X我用的變量，用絕對位置的話頂部是0，底部是你動態(tài)面板高度值。

接下來我說下變量怎么選。

增加一個局部變量，名字隨便，我命名的是bg，讓bg這個原件的值等于page1也就是動態(tài)面板的值，最后插入這個變量，使用[[bg.top]]來定義滑動的頂部，同樣的方法在定義一個bg然后插入一個變量，使用[[bg.bottom]]來定義滑動的底部。

同理，在判斷當(dāng)選中條件等于state2的時候，選擇在把動態(tài)面板里面的state2按照上面的步驟再來一遍，就OK了！

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

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