整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在日常交互場景中，我們經(jīng)常會(huì)使用【返回頂部】或者【錨點(diǎn)定位】功能，來快速到達(dá)自己想去的頁面，那么如何使用 Axure 實(shí)現(xiàn)這一交互效果呢，本文將利用 Axure 中【滾到元件】的交互去實(shí)現(xiàn)這兩個(gè)功能。
這個(gè)功能在日常使用中非常常見，其實(shí)最簡單的方式就三點(diǎn)
1、默認(rèn)隱藏【返回頂部】；
2、頁面向下滑動(dòng)一定距離后顯示【返回頂部】；
3、點(diǎn)擊【返回頂部】返回到頁面頂部
接下來開始動(dòng)手做吧:
最上面的矩形作為頂部內(nèi)容，再畫一塊矩形拉長頁面，最后用一個(gè)動(dòng)態(tài)面板畫一個(gè)回到頂部的按鈕。
首先頁面是可以持續(xù)滾動(dòng)的，而【返回頂部】的按鈕是固定在頁面上的，所以需要對(duì)按鈕所在的【動(dòng)態(tài)面板】配置【固定到瀏覽器】
接下來給【動(dòng)態(tài)面板】設(shè)置【單擊】【滾動(dòng)到原件】，目標(biāo)為【頂部矩形】
這個(gè)時(shí)候【返回頂部】的功能就做完了，但是當(dāng)頁面已經(jīng)處于頂部的時(shí)候，通常情況下是不需要顯示返回按鈕的，而是當(dāng)頁面向下滑動(dòng)一定距離后才顯示，所以可以優(yōu)化一下
我們點(diǎn)一下畫布的空白處，給頁面添加【窗口滾動(dòng)時(shí)】的交互，當(dāng)窗口垂直滑動(dòng)的距離大于頂部矩形高度的手則【顯示】 【動(dòng)態(tài)面板】 ，否則就【隱藏】
交互設(shè)置完成之后我們?cè)偃ツJ(rèn)隱藏【動(dòng)態(tài)面板】就完成了
當(dāng)網(wǎng)頁內(nèi)容較長時(shí)，通過設(shè)置錨點(diǎn)，用戶可以通過點(diǎn)擊鏈接直接跳轉(zhuǎn)到頁面的特定區(qū)域。
這種方式不僅提升了頁面的可訪問性，也使得用戶在瀏覽大量信息時(shí)更加快捷。
接下來模擬這樣一個(gè)場景：四個(gè)內(nèi)容四個(gè)標(biāo)題，一個(gè)動(dòng)態(tài)面板
然后給動(dòng)態(tài)面板設(shè)置【單擊】【滾動(dòng)到原件】的事件，目標(biāo)就是對(duì)應(yīng)的標(biāo)題，一 一對(duì)應(yīng)設(shè)置好就完成啦
感謝您的閱讀，希望本文能夠啟發(fā)您的設(shè)計(jì)靈感，期待在設(shè)計(jì)的道路上與您相遇
– 歡迎點(diǎn)贊、關(guān)注、轉(zhuǎn)發(fā)、收藏【我碼玄黃】，gonghao同名
我們打開任何手機(jī)app滑動(dòng)的手勢最多的永遠(yuǎn)是兩種，上下滑動(dòng)與左右滑動(dòng)，這個(gè)原型是如何在Axure里面怎么體現(xiàn)出來的呢？接下來我就來告訴大家。
要完成這看似簡單的操作，其實(shí)還是要有一些技巧的。Axure軟件動(dòng)態(tài)面板屬性可以滑動(dòng)，但是滑動(dòng)的結(jié)果只能是水平和垂直兩種分開的情況。
但是也不是沒有辦法實(shí)現(xiàn)同頁面上下、左右滑動(dòng)這個(gè)效果。
主要突破點(diǎn)在對(duì)條件的判斷。
我們回想一下使用手機(jī)App軟件的情形，按住屏幕不松手指向下滑動(dòng)屏幕，手機(jī)里面頁面只能向下（上）滑動(dòng)，無論你手再怎么左右滑動(dòng)，其結(jié)果還是向下（上）滑動(dòng)；向左右滑動(dòng)屏幕也是一樣的道理。
所以，手給屏幕一個(gè)動(dòng)作，頁面判斷手滑動(dòng)屏幕的方向，執(zhí)行手最初始手滑動(dòng)屏幕方向移動(dòng)，而且不松手，屏幕移動(dòng)只能維持豎直或者水平兩種效果，并不能從豎直移動(dòng)轉(zhuǎn)換到水平移動(dòng)，除非松手后頁面再次執(zhí)行判斷。即手最開始的動(dòng)作決定了頁面滑動(dòng)的方向。
抓住這一點(diǎn)，通過已學(xué)Axure軟件知識(shí)點(diǎn)，我想出如下實(shí)現(xiàn)該功能方案。
我通過多次嘗試終于測試出一種結(jié)果較為理想的方法：
拖動(dòng)動(dòng)態(tài)面板A開始，通過動(dòng)態(tài)面板C兩個(gè)狀態(tài)快速循環(huán)，在其狀態(tài)改變時(shí)記錄全局變量x、y，進(jìn)而判斷拖動(dòng)動(dòng)態(tài)面板A時(shí)x、y大小從而知道其頁面（動(dòng)態(tài)面板B）滑動(dòng)方向。
流程圖如下：
做一個(gè)手機(jī)外殼，內(nèi)嵌寬高325X575的內(nèi)聯(lián)框架，連接框架到內(nèi)容頁面：
設(shè)置全局變量x、y；
點(diǎn)擊菜單欄中-項(xiàng)目-全局變量，新增兩個(gè)全局變量x和y，設(shè)值為空或0；
向新的頁面添加一個(gè)帶頁碼的矩形標(biāo)識(shí)框，復(fù)制成三份，分別代表第一頁、第二頁、第三頁，名稱分別為1、2、3。
將這三個(gè)頁面圈起來—右鍵—轉(zhuǎn)換為動(dòng)態(tài)面板，設(shè)置該動(dòng)態(tài)面板名稱為B，再點(diǎn)擊動(dòng)態(tài)面板B—右鍵—轉(zhuǎn)換為動(dòng)態(tài)面板，設(shè)置最外層動(dòng)態(tài)面板名稱為A。
再往動(dòng)態(tài)面板A外面拖入一個(gè)新的動(dòng)態(tài)面板C,把動(dòng)態(tài)面板狀態(tài)添加到兩個(gè)。
在動(dòng)態(tài)面板A上設(shè)置如下用例：
拖動(dòng)開始時(shí)：設(shè)置動(dòng)態(tài)面板C狀態(tài)為Next，向后循環(huán)，間隔2ms（時(shí)間要短）；
拖動(dòng)時(shí)：判斷全局變量x，y大小；
x>y時(shí)水平移動(dòng)動(dòng)態(tài)面板B，x<y時(shí)垂直移動(dòng)動(dòng)態(tài)面板B；
拖動(dòng)結(jié)束時(shí)：設(shè)置動(dòng)態(tài)面板C停止循環(huán)。
在動(dòng)態(tài)面板C上設(shè)置用例
狀態(tài)改變時(shí)：設(shè)置全局變量值。
x=[[math.abs(math.ceil(TotalDragX))]]，y=[[math.abs(math.ceil(TotalDragY))]]
點(diǎn)擊菜單欄發(fā)布-預(yù)覽即可看到同頁面實(shí)現(xiàn)了左右、上下兩種拖動(dòng)效果。
emmmmmmm覺得看著很不舒服我們可以進(jìn)一步完善原型：
增加：
在原來的原型基礎(chǔ)上：
水平拖動(dòng)而言，知道動(dòng)態(tài)面板B元件的寬高為975X1000，單個(gè)矩形頁面寬高為325X1000。所以水平拖動(dòng)限制邊界范圍為[-650，0]即可滿足水平拖動(dòng)時(shí)不會(huì)把頁面拖瀏覽邊框。
同樣的垂直拖動(dòng)，限制邊界范圍為[-500，0]即可。
技術(shù)等級(jí)】初級(jí)
【承接文章】《CSS段落行高，竟然能夠?qū)崿F(xiàn)垂直居中功能，神奇的CSS技術(shù)》
本文重點(diǎn)講解CSS技術(shù)中文本樣式的 vertical-align 屬性的詳細(xì)用法。本文屬于前端開發(fā)的初級(jí)教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。
vertical-align屬性的用法較為復(fù)雜，該屬性的取值較多，不了解這個(gè)屬性用法的學(xué)習(xí)者，一定要堅(jiān)持把這篇文章讀完。
一、設(shè)置垂直方向的對(duì)齊方式：
CSS技術(shù)利用 vertical-align 屬性來設(shè)置內(nèi)聯(lián)元素的垂直對(duì)齊方式
該屬性的功能是：設(shè)置內(nèi)聯(lián)元素或內(nèi)聯(lián)塊元素相對(duì)于所在行其他元素的垂直對(duì)齊方式。這里在對(duì)齊時(shí)，都是考慮基線的對(duì)齊，即內(nèi)聯(lián)元素的基線相對(duì)于所在行其他元素的基線的垂直對(duì)齊方式。
這里需要注意的一定要是“內(nèi)聯(lián)元素”或“內(nèi)聯(lián)塊元素”。
【有關(guān)“內(nèi)聯(lián)元素”的知識(shí)，可以參考小海老師前面寫的《CSS段落對(duì)齊方式，系統(tǒng)認(rèn)識(shí)塊級(jí)元素與內(nèi)聯(lián)元素，CSS前端進(jìn)階篇》一文】
該屬性的取值可以有以下幾種：
帶有單位的數(shù)值，可以取負(fù)值，在基線對(duì)齊的基礎(chǔ)上，內(nèi)聯(lián)元素向下移動(dòng)一定的距離（正值）或者向上移動(dòng)一定的距離（負(fù)值）。
%，可以取負(fù)值，在基線對(duì)齊的基礎(chǔ)上，內(nèi)聯(lián)元素向下移動(dòng)line-height屬性的百分比的距離（正百分比）或者向上移動(dòng)line-height屬性的百分比的距離。
baseline，【默認(rèn)值】基線對(duì)齊，內(nèi)聯(lián)元素的基線與所在行的其他元素的基線對(duì)齊。
sub，上標(biāo)。
super，下標(biāo)。
top，頂部對(duì)齊，內(nèi)聯(lián)元素的頂部與所在行的其他元素中最高的元素的頂部對(duì)齊。
text-top，文本頂部對(duì)齊，內(nèi)聯(lián)元素的頂部與所在行的文字頂部對(duì)齊。
middle，中部對(duì)齊，內(nèi)聯(lián)元素的中部與所在行其他元素的中部對(duì)齊。
bottom，底部對(duì)齊，內(nèi)聯(lián)元素的底部與所在行的其他元素中最低的元素的底部對(duì)齊。
text-bottom，文本底部對(duì)齊，內(nèi)聯(lián)元素的底部與所在行的文字底部對(duì)齊。
二、基線垂直對(duì)齊：
要想深入了解vertical-align屬性各項(xiàng)取值的含義，首先，讓我們先看一看什么是基線對(duì)齊。
例1：在段落標(biāo)記<p></p>內(nèi)部，放置一個(gè)圖片和一行文字。HTML代碼如下。
<p>
<img src="images/a.jpg" /> 小海前端
</p>
得到的效果如下圖所示，仔細(xì)觀察下圖：圖片底部和文字底部是對(duì)齊的嗎？
例1的最終效果
仔細(xì)觀察，其實(shí)它們底部并沒有完全對(duì)齊。如果將文字的字號(hào)放大，可以看得更加明顯。
將例1中的文字放大后的效果
上圖中，由于文字字號(hào)的變大，在圖片中只呈現(xiàn)了一個(gè)“小”字，但是我們完全可以看出，圖片的底部并沒有和文字的底部對(duì)齊。而對(duì)齊文字的這個(gè)位置實(shí)際上是文字的“基線”。
【有關(guān)“基線”的知識(shí)，可以參考小海老師前面寫的《CSS段落行高，竟然能夠?qū)崿F(xiàn)垂直居中功能，神奇的CSS技術(shù)》一文】
原來，圖片本身屬于內(nèi)聯(lián)元素，而 內(nèi)聯(lián)元素的vertical-align屬性的默認(rèn)取值為baseline，即基線對(duì)齊，也就是圖片的基線（底部）默認(rèn)和文字的基線對(duì)齊了。
三、取值為“帶有單位的數(shù)值”：
如果vertical-align屬性的取值為帶有單位的數(shù)值，則也是在基線對(duì)齊的基礎(chǔ)上開始上下移動(dòng)一定的距離。
如果圖片的vertical-align屬性取值為0px，則依然為基線對(duì)齊的位置。
如果圖片的vertical-align屬性取值為5px，則在基線對(duì)齊位置的基礎(chǔ)上向下移動(dòng)5px的距離。
如果圖片的vertical-align屬性取值為-5px，則在基線對(duì)齊位置的基礎(chǔ)上向上移動(dòng)5px的距離。
四、取值為“百分比 ”：
如果vertical-align屬性的取值為百分比，則也是在基線對(duì)齊的基礎(chǔ)上開始上下移動(dòng)一定的距離。
那么，問題來了。
百分比意味著移動(dòng)多少像素的距離呢？
百分比又是以什么距離為基準(zhǔn)的呢，即誰的百分比呢？
我們前端開發(fā)工程師一定要記住：vertical-align屬性的百分比取值不是父元素高度的百分比，而是 line-height 屬性取值的百分比。
即：vertical-align屬性的百分比取值是以line-height屬性的取值為基準(zhǔn)的，及移動(dòng)距離為vertical-align屬性的絕對(duì)值乘以line-height屬性取值的距離數(shù)。
假設(shè)：容器的line-height屬性取值為20px，則：
如果圖片的vertical-align屬性取值為0%，則依然為基線對(duì)齊的位置。
如果圖片的vertical-align屬性取值為50%，則在基線對(duì)齊位置的基礎(chǔ)上向下移動(dòng)(20px*50%)的距離，即向下移動(dòng)10px。
如果圖片的vertical-align屬性取值為-50%，則在基線對(duì)齊位置的基礎(chǔ)上向上移動(dòng)(20px*50%)的距離，即向上移動(dòng)10px。
五、取值為top和text-top：
例2：我們?cè)诶?的基礎(chǔ)上在段落<p></p>中再添加一個(gè)圖片，并設(shè)置圖片的高度大于文本。
仔細(xì)閱讀下列HTML代碼：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
從代碼中可以看出，文字“小海前端”左側(cè)的圖片設(shè)置了vertical-align屬性，并取值為top。根據(jù)文字“小海前端”左右的兩張圖片的width屬性可知，右側(cè)圖片的高度肯定比較高。
效果如下圖所示。
例2的最終效果
原因是：vertical-align屬性取值為top是指讓設(shè)置了該屬性的元素頂部和同行周圍元素中最高元素的頂部對(duì)齊。從圖中可知，顯然最高的元素是右側(cè)的圖片，因此就呈現(xiàn)為上圖中的外觀了。
而右面的圖片沒有設(shè)置vertical-align屬性，因此依然為“基線對(duì)齊”，即右側(cè)圖片的底部對(duì)齊文字的基線。
例3：在例2的基礎(chǔ)上，我們將右側(cè)圖片的高度縮小至比文字還小的程度，那可想而知，左側(cè)圖片就應(yīng)該與文字頂部對(duì)齊了。
仔細(xì)閱讀下列HTML代碼：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="100" />
</p>
從代碼中可以看出，右側(cè)圖片的寬度由500改為了100，同時(shí)高度也會(huì)隨之等比縮小。
最終效果如下圖所示：
例3的最終效果
例4：在例2的基礎(chǔ)上，我們調(diào)整左側(cè)圖片vertical-align屬性的取值為text-top，則HTML代碼如下。
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:text-top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
則最終的顯示效果如下圖所示。
例4的最終效果
原因是：text-top屬性是要求內(nèi)聯(lián)元素與同行內(nèi)文本的頂部對(duì)齊。因此，就出現(xiàn)了上圖中的效果。
而右面的圖片沒有設(shè)置vertical-align屬性，因此依然為“基線對(duì)齊”，即右側(cè)圖片的底部對(duì)齊文字的基線。
vertical-align屬性還具備bottom和text-bottom取值，和這兩個(gè)頂部對(duì)齊（top和text-top）的含義是類似的，希望同學(xué)們自己在電腦上嘗試一下。
下一篇文章中，小海老師會(huì)為大家講解一個(gè)vertical-align屬性和line-height屬性的應(yīng)用，用于去掉圖片在容器中放置時(shí)，底部產(chǎn)生的小距離。這是前端開發(fā)中非常經(jīng)典的bug解決方案，對(duì)于希望深入了解前端開發(fā)的學(xué)習(xí)者真的是非常重要。
如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會(huì)免費(fèi)將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。
在頭條上所寫的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。小海老師非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識(shí)，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗(yàn)，每寫一篇時(shí)我都盡量把握好措辭，用簡單易懂的語言描述，同時(shí)精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費(fèi)小海老師很久的時(shí)間。
希望收藏了我寫的文章的你同時(shí)可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過我精心整理和系統(tǒng)歸納過的。
關(guān)注“小海前端”，我會(huì)繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
