国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

在移動端頁面上，用手上下滑時，超過一定向上滑動時，菜單欄能有吸頂效果，如何用axure實現(xiàn)呢？

作者在最近在手機移動端的時候，有一個動畫，希望達到效果：用手上下滑頁面時，超過一定向上滑動時，菜單欄能有吸頂效果，這個效果相信不用我多說，都應(yīng)該懂，但是如何用axure實現(xiàn)呢？

因為不會，先看了網(wǎng)上的教程，但是網(wǎng)上的教程都是以網(wǎng)頁滾動，坦白說都是pc端的交互效果。

當(dāng)然如果對于新手小白來說，直接拖出來一個動態(tài)面板，然后讓其顯示滾動條，就可以很簡單的達到滾動效果，然后設(shè)置菜單欄超過一定的滾動距離時，吸頂就可以。

沒有超過一定滾動距離，就保持原來的位置就可以，這里面主要設(shè)計的是scrollY這個函數(shù)（頁面滾動時用的windows.scrollY函數(shù)）。

（點擊動態(tài)面板的屬性欄）

（大家可以去試試，當(dāng)動態(tài)面板加上這個滾動條時，就可以自己實現(xiàn)內(nèi)容的滾動效果）

前面是給大家溫習(xí)一下網(wǎng)上的教程，接下來就來講一下我所制作的app端頁面拖動上下滑效果。

我就以拉勾網(wǎng)為例，具體大家可以看一下拉鉤app首頁就行。

準備素材：

1. 手機素材：不用說了，這就是我們的框架

2. 主動態(tài)面板：你可以把它理解為用手滑的那塊屏幕

3. 滑動的面板：內(nèi)容的承載面板，將完整內(nèi)容都放入這個面板里

4. 菜單欄：

菜單欄準備兩份，大家可以看下面這個圖，記住，一摸一樣的準備兩份，一份放入在滑動的面板中，一份則放在滑動的面板外（放置圖層頂端，默認隱藏狀態(tài)），可以看一下圖中的層級關(guān)系。

滑動的面板——內(nèi)容準備

5. 用到的函數(shù)：this.y(元件的縱坐標，沒錯就是這么簡單)

準備材料都知曉后，接下來就要開始我們的交互設(shè)置：

1. 首先，我們要作出用鼠標拖動主面板時，內(nèi)容可以上下滑動，這一步很簡單：定位到主面板元件-拖動時-移動-滑動的面板-垂直拖動-確定，設(shè)置完成，大家可以預(yù)覽一下，現(xiàn)在我們的內(nèi)容是不是可以自由的上下拖動了。

2. 第二步，我們要現(xiàn)在腦子中有一個邏輯判斷：因為菜單欄在滑動的面板中的y坐標為281（我自己設(shè)置的），所以，當(dāng)向上拖動距離大于281時，是不是菜單欄就要有吸頂效果了；當(dāng)向上拖動距離小于281時，菜單欄是不是該在哪個位置，還在哪個位置。

那如何體現(xiàn)我上下拖動的距離呢？那就是用前面我們說的“this.y”函數(shù)，指的是元件的y坐標軸。按照我的流程來的小伙伴，有沒有注意到，滑動的面板的坐標軸是（0，0），意思是這里面的元件的坐標都是按相對位置來算了，是在主面板里又定位了一套坐標軸，那同理滑動面板里的元件也都是在滑動面板下從新定位的一套。

滑動的面板坐標

所以，滑動面板里的菜單欄的位置為（7，281），意味著當(dāng)滑動的面板向上滑動距離大于281時（滑動的面板.y=<-281時），顯示“菜單欄-復(fù)制”；當(dāng)上滑距離小于281（滑動的面板.y>=-281時），隱藏“菜單欄-復(fù)制”,接下來就是設(shè)置過程：

對滑動的面板設(shè)置

對滑動的面板設(shè)置

設(shè)置不滿足時隱藏菜單欄

那么，設(shè)置完畢，大家就可以預(yù)覽一下效果了，非常簡單，你學(xué)會了嗎？

原型在線瀏覽：https://woqt8g.axshare.com

插句題外話：為什么我不用”this.scrollY”這個函數(shù)，因為這個函數(shù)指的是上下滾動的距離，不是拖動的距離，大家不要搞混了，當(dāng)動態(tài)面板有滾動條的時候，那個上下滑的距離可以用scrolly來表示，但是拖動不會變化scrolly的值,這個你可以用數(shù)字顯示的形式去觀察一下。

以上就是我做的適合移動端的吸頂交互效果。

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

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