中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

因?yàn)椴粫?huì)，先看了網(wǎng)上的教程，但是網(wǎng)上的教程都是以網(wǎng)頁(yè)滾動(dòng)，坦白說(shuō)都是pc端的交互效果。

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

沒(méi)有超過(guò)一定滾動(dòng)距離，就保持原來(lái)的位置就可以，這里面主要設(shè)計(jì)的是scrollY這個(gè)函數(shù)（頁(yè)面滾動(dòng)時(shí)用的windows.scrollY函數(shù)）。

（點(diǎn)擊動(dòng)態(tài)面板的屬性欄）

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

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

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

準(zhǔn)備素材：

1. 手機(jī)素材：不用說(shuō)了，這就是我們的框架

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

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

4. 菜單欄：

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

滑動(dòng)的面板——內(nèi)容準(zhǔn)備

5. 用到的函數(shù)：this.y(元件的縱坐標(biāo)，沒(méi)錯(cuò)就是這么簡(jiǎn)單)

準(zhǔn)備材料都知曉后，接下來(lái)就要開(kāi)始我們的交互設(shè)置：

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

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

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

滑動(dòng)的面板坐標(biāo)

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

對(duì)滑動(dòng)的面板設(shè)置

對(duì)滑動(dòng)的面板設(shè)置

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

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

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

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

以上就是我做的適合移動(dòng)端的吸頂交互效果。

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

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