起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure基礎(chǔ)教程：如何實(shí)現(xiàn)網(wǎng)站Tab導(dǎo)航欄切換內(nèi)容頁？返回頂部交互怎么做？
導(dǎo)語：今天，本文作者和大家分享一下如何通過Axure實(shí)現(xiàn)網(wǎng)站Tab導(dǎo)航欄切換內(nèi)容頁和返回頂部交互，希望看后對你能有所幫助。
我們在使用知乎時，會發(fā)現(xiàn)向下滾動頁面，網(wǎng)站Tab導(dǎo)航欄會發(fā)生內(nèi)容切換；同時滾動超過一定距離，會出現(xiàn)回到頂部按鈕，點(diǎn)擊該按鈕，即可返回頁面頂部。
一、實(shí)現(xiàn)邏輯
- 向下滑動頁面，Tab導(dǎo)航欄由第一種狀態(tài)切換成第二種狀態(tài)；向上滑動頁面，Tab導(dǎo)航欄由第二種狀態(tài)切換成第一種狀態(tài)；
- 頁面滑動一定距離，顯示回到頂部按鈕，點(diǎn)擊回到頂部按鈕，頁面向上滾動回到頁面頂部。
二、頁面構(gòu)建元件準(zhǔn)備
頂部欄兩種狀態(tài)及下滑頁面準(zhǔn)備，我是通過截圖的方式準(zhǔn)備的：
回到頂部按鈕、鼠標(biāo)移入按鈕時所顯示的浮窗，將該組合命名為“回到頂部-總”：
三、添加交互事件
將頂部欄的兩種狀態(tài)分別放入動態(tài)面板中的狀態(tài)1與狀態(tài)2中，將動態(tài)面板命名為statusBar；
添加鼠標(biāo)移入回到頂部按鈕顯示”回到頂部”氣泡：
添加向下、向上滑動頁面，頂部狀態(tài)欄切換；
- 首先，固定頂部狀態(tài)欄：
其次，對窗口添加交互：
將“回到頂部-總”組合轉(zhuǎn)為動態(tài)面板，將該動態(tài)面板命名為“回到頂部-總panel”，固定動態(tài)面板顯示位置，并隱藏：
添加錨點(diǎn)元件，我們在此選擇熱區(qū)元件，因?yàn)闊釁^(qū)具有透明的特性，將其命名為TopLocation：
為“回到頂部”按鈕增加交互，鼠標(biāo)移入顯示“回到頂部”氣泡，移除隱藏“回到頂部”氣泡；為“回到頂部”按鈕添加【單擊時】用例，設(shè)置動作【滾動到元件】，選擇TopLocation，垂直線性滾動500毫秒。
四、最終效果展示
五、補(bǔ)充知識
在上面交互的應(yīng)用中，我們會用到Window.scrollY函數(shù)，該函數(shù)為窗口函數(shù)；窗口函數(shù)一共包括以下四種：
- Windows.width：獲取瀏覽器的當(dāng)前寬度。
- Windows.height：獲取瀏覽器的當(dāng)前高度。
- Windows.scrollX：獲取瀏覽器的水平滾動距離。
- Windows.scrollY：獲取瀏覽器的垂直滾動距離。
本文由 @小青 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自?Unsplash，基于 CC0 協(xié)議
- 目前還沒評論，等你發(fā)揮！
