大家好，這一次所要分享實現的效果就是：縱向滑動移動端屏幕，內容向上滾動直至tab選項欄到達頂部時，tab選項欄固定在頂部，而tab選項欄下內容繼續滾動。由于這里使用了上一篇文章中所分享的移動端簡單滾動區的制作，所以最好大家可以翻閱一下我的上一篇文章，有助于理解。

1、材料準備

1. 兩個滾動區域：具體的制作方法，可以參考我的上一篇分享文章。
2. 兩個動態面板：一個放置常規內容，一個放置tab選項。

2、頁面布局

（1）先從元件庫中拖入一個矩形，設置尺寸大小為width=360，height=640，表示手機屏幕；再拖入一個矩形，設置尺寸大小為width=360，height=40，表示標題欄，如下圖。

（2）向手機屏幕區域拖入上一篇文章中介紹的內容滾動區動態面板rolling_area（width=360，height=600），雙擊進入State1，再雙擊content_area進入它的State1，依次拖入兩個動態面板：分別命名為dtmb01（x=0，y=0，width=360，height=250），dtmb02（x=0，y=250，width=360，height=40）。動態面板dtmb01放置普通內容，動態面板dtmb02放置tab選項。舉個例子，假如這個頁面要用來介紹某個商家，并且要發布商品上去供用戶下單購買，那么動態面板dtmb01就可以放置商家的圖片和名稱，動態面板dtmb02的選項就可以是“商品”和“商家簡介”，如下圖。

（3）再拖入一個上一篇文章中介紹的內容滾動區，設置width=360，height=560），為了區分上一個動態面板，我們將這一個動態面板命名為rolling_area02，進入state1里將內容動態面板命名為content_area02。在這里為什么要將這一個滾動區的高度設置為560呢？這是因為到最后我們所要的滾動區域，也就是這個滾動區的高度是：整個手機屏幕的高度減去標題欄的高度，再減去tab選項欄的高度，也就是640-40-40=560。為了便于理解，我給這個內容區域加入一些模擬數據。如下圖。

3、實現交互

首先，我們先按鍵盤F5鍵，預覽一下。

我們可以看到，如果拖動A或者B兩個區域，滾動的是A、B、C三個區域；如果拖動的是C區域，那么滾動的只有C區域。但是我們最終要實現的是：在最初時無論拖動哪里都是滾動整個的A、B、C三個區域，直到B區域的tab選項欄滾動到頂部被固定住，再換成滾動C區域。所以我們需要為C區域的rolling_area02作一個限制。

（1）設置當tab選項欄（B區域）未到達頂部而去拖動C區域時，滾動的是整個的A、B、C三個區域。如何來判斷B區域是不是到達了頂部呢？我們可以通過第一個rolling_area里的動態面板content_area的y值來判斷。一旦content_area的y值等于動態面板dtmb01高度的負值時，說明B區域剛好到達了頂部。所以簡單的理解就是：在拖動C區域時，如果content_area的y值大于動態面板dtmb01高度的負值，那么滾動content_area整個區域（包括A、B、C區域）；如果content_area的值小于或等于動態面板dtmb01高度的負值，那么滾動content_area02。

（2）轉換為語句實現交互

a.如果content_area的y值大于動態面板dtmb01高度的負值，則垂直移動content_area：雙擊C區域的動態面板rolling_area02，進入state1，點擊動態面板content_area02，在右邊的交互中添加用例，選擇“拖動時，”點擊“添加條件”，選擇值，然后添加值的對象，點擊“fx”來插入受限的對象（這里要監督的對象是content_area的y值）。

所以插入局部變量（元件content_area，命名為LVAR1），取它的y值，如下圖。

選擇”>”運算符，如下圖：

我們需要在右邊插入值（動態面板dtmb01高度的負值），點擊“fx”，同樣插入局部變量LVAR1，并且取它高度的負值，如下圖：

條件設置完畢，接著設置在這個條件下時，垂直拖動content_area。

b.如果content_area的y值小于或者等于動態面板dtmb01高度的負值，則垂直拖動content_area02：添加用例case2“拖動時”的else if用例設置動作為垂直拖動content_area02，如下圖：

我們再按鍵盤F5鍵預覽，發現tab欄滾動到頂部時被固定住了，剛剛要的效果總算是實現了。

但是，我們發現當tab欄被固定住時，我們往下拖動商品列表（C區域）的時候，我們無法回去看A區域的商家的圖片和名稱。

那么這時我們就需要解決這個問題：當content_area02被往下拖到盡頭時，content_area需要向下滾動一定距離。

（3）點擊content_area02，雙擊原有的case1（if”[[This.y]]>0″），添加動作設置線性移動content_area到相對位置（0,50），如下圖。

我們再按鍵盤F5鍵預覽，發現剛剛的問題解決了?？墒?，另外一個問題又來了：我們向下拖動C區域，當拖動結束時，屏幕的內容會被定住，沒法彈回去，不過向下拖動A或者B區域結束時不會出現這樣的情況。所以這一定是因為我們對C區域，也就是content_area02的拖動結束用例沒有設置完善。我們需要設置拖動它結束時content_area要回到頂部，簡單的說就是拖動結束時content_area要回到（0,0）的位置。

（4）點擊content_area02，在原來的基礎上添加“拖動結束時”用例case3，添加條件，如下圖步驟：

再按鍵盤F5鍵預覽，剛剛的問題解決了。

至此，一個帶有tab選項欄的滾動區就完成了，我們可以看到如下效果！

作者：Lydia，微信號/新浪微博：Ldyia_Lion，初入行產品經理

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