1.新建項目
2.拖拽一個矩形到頂部和底部並分別命名爲navTop和navBtm
3. 拖拽一個動態面板到元件中間，並調整大小，命名爲內容
4. 雙擊State1，編輯State1的面板狀態。也可以直接雙擊拖進去的那個動態面板，然後雙擊State1進行編輯。
5.如下圖所示，雙擊state1之後會出現一個藍色虛線矩形框。
在內容/State1(index)中再拖進來一個動態面板(注意是“內容”這個動態面板的State1中再拖進來一個動態面板，弄兩層動態面板是爲了遮住滾動條，後面會提到。如果不介意有滾動條，則直接一個動態面板，然後雙擊State1往裏面加東西，，調整大小，然後命名爲“滑動滾動效果實現”。
雙擊“滑動滾動效果實現”這個動態面板的State1,
在打開的藍色虛線框裏面任意加一些東西，爲了方便，我們拖拽5個矩形過來（注意暫時不要再去調整藍色虛線框的大小，這就是手機屏幕的顯示區域------裏面的內容可以超出虛線框，但是如果不像水平方向滑動，不要在水平方向超出藍色框框的範圍）。縮小編輯區域後效果如下圖所示：
爲了後面效果看起來比較明顯，還是給那5的矩形加一個背景色，分別爲：“紅橙黃綠藍”，然後在“內容”動態面板的State1中調整它裏面的動態面板“滑動滾動效果實現”的高度，讓它能顯示所有的內容。
在“內容”動態面板中（外層）雙擊“拖動時”，添加動作“移動”，配置動作“滑動滾動效果實現（動態面板）”（內層），然後移動選擇“垂直移動”。
點擊確定
其實，做到這一步已經實現了滑動效果了，但是爲了讓滑動看起來更加合理一點------拖到最下面了，不能再往下拖；拖到最上面了，不能再網上拖。以頂部導航欄和底部導航欄作爲參考點，當向上拖動內層動態面板（也就是我們的閱讀內容）的時候，如果已經拖到底了，就讓最後一行的內容顯示在屏幕可見區域的底部；當向下拉閱讀內容的時候，如果在屏幕可見區域的最上面正好是閱讀內容的第一行，就不能再往下拉了，這個我們通過絕對定位來實現，如果效果圖中不需要導航欄，可以隨便拖一個矩形或者佔位符並將它們設爲隱藏就可以了。
同樣地，在“內容”面板的屬性欄雙擊“拖動結束時”
點擊確定，然後添加動作“移動”，配置動作“滑動滾動效果實現（動態面板）”，移動“絕對位置”，x:0,y:0;
這個條件配置是說：當我往下拉的時候，如果已經拉到內容區域沒能跟頂部導航欄接觸了，就讓“滑動滾動效果實現”這個面板的位置爲：絕對位置x:0.y:0（它相對於父面板“內容”面板定位）。
再次在“內容”面板的屬性欄雙擊“拖動結束時”
這個條件配置是說：當我往上拉的時候，如果已經拉到內容區域沒能跟底部導航欄接觸了，就讓“滑動滾動效果實現”這個面板的位置爲：絕對位置x:0.y:-304（它相對於父面板“內容”面板定位）。
-304這個值怎麼來的呢？我們先看一下兩個動態面板的座標和大小：
這是“內容”動態面板的座標和寬高：我們只需關注其高爲587
這是“滑動滾動效果實現”的左邊和寬高，相對於“內容”動態面板，它的偏移量爲（0,0），高爲934
934-587=347,也就是說：在爲滑動屏幕內容的情況下，有347像素的內容未顯示出來，當我滾動內容到最下面的時候，“滑動滾動效果實現”動態面板的最頂部相對於“內容”在y軸方向的偏移量就應該是-347。
弄個“線性”動畫效果是爲了使過渡效果更平滑些，至於時間，根據自己的需要來定即可~
最終效果是這樣的：
