大家好，這一次所要分享實(shí)現(xiàn)的效果就是：縱向滑動(dòng)移動(dòng)端屏幕，內(nèi)容向上滾動(dòng)直至tab選項(xiàng)欄到達(dá)頂部時(shí)，tab選項(xiàng)欄固定在頂部，而tab選項(xiàng)欄下內(nèi)容繼續(xù)滾動(dòng)。由于這里使用了上一篇文章中所分享的移動(dòng)端簡(jiǎn)單滾動(dòng)區(qū)的制作，所以最好大家可以翻閱一下我的上一篇文章，有助于理解。

1、材料準(zhǔn)備

1. 兩個(gè)滾動(dòng)區(qū)域：具體的制作方法，可以參考我的上一篇分享文章。
2. 兩個(gè)動(dòng)態(tài)面板：一個(gè)放置常規(guī)內(nèi)容，一個(gè)放置tab選項(xiàng)。

2、頁(yè)面布局

（1）先從元件庫(kù)中拖入一個(gè)矩形，設(shè)置尺寸大小為width=360，height=640，表示手機(jī)屏幕；再拖入一個(gè)矩形，設(shè)置尺寸大小為width=360，height=40，表示標(biāo)題欄，如下圖。

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

（3）再拖入一個(gè)上一篇文章中介紹的內(nèi)容滾動(dòng)區(qū)，設(shè)置width=360，height=560），為了區(qū)分上一個(gè)動(dòng)態(tài)面板，我們將這一個(gè)動(dòng)態(tài)面板命名為rolling_area02，進(jìn)入state1里將內(nèi)容動(dòng)態(tài)面板命名為content_area02。在這里為什么要將這一個(gè)滾動(dòng)區(qū)的高度設(shè)置為560呢？這是因?yàn)榈阶詈笪覀兯臐L動(dòng)區(qū)域，也就是這個(gè)滾動(dòng)區(qū)的高度是：整個(gè)手機(jī)屏幕的高度減去標(biāo)題欄的高度，再減去tab選項(xiàng)欄的高度，也就是640-40-40=560。為了便于理解，我給這個(gè)內(nèi)容區(qū)域加入一些模擬數(shù)據(jù)。如下圖。

3、實(shí)現(xiàn)交互

首先，我們先按鍵盤(pán)F5鍵，預(yù)覽一下。

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

（1）設(shè)置當(dāng)tab選項(xiàng)欄（B區(qū)域）未到達(dá)頂部而去拖動(dòng)C區(qū)域時(shí)，滾動(dòng)的是整個(gè)的A、B、C三個(gè)區(qū)域。如何來(lái)判斷B區(qū)域是不是到達(dá)了頂部呢？我們可以通過(guò)第一個(gè)rolling_area里的動(dòng)態(tài)面板content_area的y值來(lái)判斷。一旦content_area的y值等于動(dòng)態(tài)面板dtmb01高度的負(fù)值時(shí)，說(shuō)明B區(qū)域剛好到達(dá)了頂部。所以簡(jiǎn)單的理解就是：在拖動(dòng)C區(qū)域時(shí)，如果content_area的y值大于動(dòng)態(tài)面板dtmb01高度的負(fù)值，那么滾動(dòng)content_area整個(gè)區(qū)域（包括A、B、C區(qū)域）；如果content_area的值小于或等于動(dòng)態(tài)面板dtmb01高度的負(fù)值，那么滾動(dòng)content_area02。

（2）轉(zhuǎn)換為語(yǔ)句實(shí)現(xiàn)交互

a.如果content_area的y值大于動(dòng)態(tài)面板dtmb01高度的負(fù)值，則垂直移動(dòng)content_area：雙擊C區(qū)域的動(dòng)態(tài)面板rolling_area02，進(jìn)入state1，點(diǎn)擊動(dòng)態(tài)面板content_area02，在右邊的交互中添加用例，選擇“拖動(dòng)時(shí)，”點(diǎn)擊“添加條件”，選擇值，然后添加值的對(duì)象，點(diǎn)擊“fx”來(lái)插入受限的對(duì)象（這里要監(jiān)督的對(duì)象是content_area的y值）。

所以插入局部變量（元件content_area，命名為L(zhǎng)VAR1），取它的y值，如下圖。

選擇”>”運(yùn)算符，如下圖：

我們需要在右邊插入值（動(dòng)態(tài)面板dtmb01高度的負(fù)值），點(diǎn)擊“fx”，同樣插入局部變量LVAR1，并且取它高度的負(fù)值，如下圖：

條件設(shè)置完畢，接著設(shè)置在這個(gè)條件下時(shí)，垂直拖動(dòng)content_area。

b.如果content_area的y值小于或者等于動(dòng)態(tài)面板dtmb01高度的負(fù)值，則垂直拖動(dòng)content_area02：添加用例case2“拖動(dòng)時(shí)”的else if用例設(shè)置動(dòng)作為垂直拖動(dòng)content_area02，如下圖：

我們?cè)侔存I盤(pán)F5鍵預(yù)覽，發(fā)現(xiàn)tab欄滾動(dòng)到頂部時(shí)被固定住了，剛剛要的效果總算是實(shí)現(xiàn)了。

但是，我們發(fā)現(xiàn)當(dāng)tab欄被固定住時(shí)，我們往下拖動(dòng)商品列表（C區(qū)域）的時(shí)候，我們無(wú)法回去看A區(qū)域的商家的圖片和名稱。

那么這時(shí)我們就需要解決這個(gè)問(wèn)題：當(dāng)content_area02被往下拖到盡頭時(shí)，content_area需要向下滾動(dòng)一定距離。

（3）點(diǎn)擊content_area02，雙擊原有的case1（if”[[This.y]]>0″），添加動(dòng)作設(shè)置線性移動(dòng)content_area到相對(duì)位置（0,50），如下圖。

我們?cè)侔存I盤(pán)F5鍵預(yù)覽，發(fā)現(xiàn)剛剛的問(wèn)題解決了?？墒?，另外一個(gè)問(wèn)題又來(lái)了：我們向下拖動(dòng)C區(qū)域，當(dāng)拖動(dòng)結(jié)束時(shí)，屏幕的內(nèi)容會(huì)被定住，沒(méi)法彈回去，不過(guò)向下拖動(dòng)A或者B區(qū)域結(jié)束時(shí)不會(huì)出現(xiàn)這樣的情況。所以這一定是因?yàn)槲覀儗?duì)C區(qū)域，也就是content_area02的拖動(dòng)結(jié)束用例沒(méi)有設(shè)置完善。我們需要設(shè)置拖動(dòng)它結(jié)束時(shí)content_area要回到頂部，簡(jiǎn)單的說(shuō)就是拖動(dòng)結(jié)束時(shí)content_area要回到（0,0）的位置。

（4）點(diǎn)擊content_area02，在原來(lái)的基礎(chǔ)上添加“拖動(dòng)結(jié)束時(shí)”用例case3，添加條件，如下圖步驟：

再按鍵盤(pán)F5鍵預(yù)覽，剛剛的問(wèn)題解決了。

至此，一個(gè)帶有tab選項(xiàng)欄的滾動(dòng)區(qū)就完成了，我們可以看到如下效果！

作者：Lydia，微信號(hào)/新浪微博：Ldyia_Lion，初入行產(chǎn)品經(jīng)理

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