axure實現左側導航欄的展開與收縮-tft每日頭條

axure實現左側導航欄的展開與收縮

科技更新时间:2025-06-14 16:33:50

　　導語：今天，本文作者和大家分享一下如何通過Axure實現網站Tab導航欄切換内容頁和返回頂部交互，希望看後對你能有所幫助。

　　 axure實現左側導航欄的展開與收縮（如何實現網站Tab導航欄切換内容頁）(1)

　　我們在使用知乎時，會發現向下滾動頁面，網站Tab導航欄會發生内容切換；同時滾動超過一定距離，會出現回到頂部按鈕，點擊該按鈕，即可返回頁面頂部。

　　 axure實現左側導航欄的展開與收縮（如何實現網站Tab導航欄切換内容頁）(2)

　　一、實現邏輯向下滑動頁面，Tab導航欄由第一種狀态切換成第二種狀态；向上滑動頁面，Tab導航欄由第二種狀态切換成第一種狀态；頁面滑動一定距離，顯示回到頂部按鈕，點擊回到頂部按鈕，頁面向上滾動回到頁面頂部。二、頁面構建元件準備 頂部欄兩種狀态及下滑頁面準備，我是通過截圖的方式準備的：

　　 axure實現左側導航欄的展開與收縮（如何實現網站Tab導航欄切換内容頁）(3)

　　回到頂部按鈕、鼠标移入按鈕時所顯示的浮窗，将該組合命名為“回到頂部-總”：

　　 axure實現左側導航欄的展開與收縮（如何實現網站Tab導航欄切換内容頁）(4)

　　三、添加交互事件 将頂部欄的兩種狀态分别放入動态面闆中的狀态1與狀态2中，将動态面闆命名為statusBar；

　　 axure實現左側導航欄的展開與收縮（如何實現網站Tab導航欄切換内容頁）(5)

　　添加鼠标移入回到頂部按鈕顯示”回到頂部”氣泡：

　　 axure實現左側導航欄的展開與收縮（如何實現網站Tab導航欄切換内容頁）(6)

　　添加向下、向上滑動頁面，頂部狀态欄切換；

　　 axure實現左側導航欄的展開與收縮（如何實現網站Tab導航欄切換内容頁）(7)

　　其次，對窗口添加交互：

　　 axure實現左側導航欄的展開與收縮（如何實現網站Tab導航欄切換内容頁）(8)

　　将“回到頂部-總”組合轉為動态面闆，将該動态面闆命名為“回到頂部-總panel”，固定動态面闆顯示位置，并隐藏：

　　 axure實現左側導航欄的展開與收縮（如何實現網站Tab導航欄切換内容頁）(9)

　　添加錨點元件，我們在此選擇熱區元件，因為熱區具有透明的特性，将其命名為TopLocation：

　　 axure實現左側導航欄的展開與收縮（如何實現網站Tab導航欄切換内容頁）(10)

　　為“回到頂部”按鈕增加交互，鼠标移入顯示“回到頂部”氣泡，移除隐藏“回到頂部”氣泡；為“回到頂部”按鈕添加【單擊時】用例，設置動作【滾動到元件】，選擇TopLocation，垂直線性滾動500毫秒。

　　 axure實現左側導航欄的展開與收縮（如何實現網站Tab導航欄切換内容頁）(11)

　　四、最終效果展示 axure實現左側導航欄的展開與收縮（如何實現網站Tab導航欄切換内容頁）(12)

　　五、補充知識 在上面交互的應用中，我們會用到Window.scrollY函數，該函數為窗口函數；窗口函數一共包括以下四種：

　　Windows.width：獲取浏覽器的當前寬度。Windows.height：獲取浏覽器的當前高度。Windows.scrollX：獲取浏覽器的水平滾動距離。Windows.scrollY：獲取浏覽器的垂直滾動距離。本文由 @小青原創發布于人人都是産品經理，未經許可，禁止轉載

　　題圖來自 Unsplash，基于 CC0 協議

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

科技 iphone 12 5G嗎
1、iPhone12是美國蘋果公司研發的iPhone手機，采用了直面邊框設計，支持5G，搭載A14Bionic芯片，雙鏡頭後置攝像頭系統。支持北鬥導航，有黑色、白色、紅色、綠色、藍色五種配色。2、北京時間2020年10月14日淩晨1點，蘋果公司在ApplePark正式發布iPhone12。3、2020年10月16日，蘋果5G新機iPhone12/Pro國行版10月16日開啟預購。其中，iPhone 2023-06-29
科技做表格技巧教程
1、【文字轉換成表格】選中我們的數據，點擊【插入】-【表格】【文本轉換成表格】即可實現我們快速制表的... 2023-06-29
科技 excel怎麼将兩列亂序姓名對齊
1、打開excel表格，選中兩列亂序姓名。2、然後，鼠标右擊—設置單元格格式。3、下一步，選擇對齊。4、然後，在水平對齊方式裡，選擇分散對齊。5、之後，點擊确定。6、返回表格，表格中姓名就對齊成功。 2023-06-29
科技螞蟻莊園雇傭好友小雞教程
1、打開支付寶，點擊【螞蟻莊園】；進入螞蟻莊園，點左下角的【好友】；彈出好友列表，點擊【其中一位好友... 2023-06-29
科技耳機怎麼戴
1、首先，将耳套插入耳朵，稍微向内推入一點，用手使耳套充分膨脹開，封閉耳道。戴左耳耳機時，用右手抓住... 2023-06-29
科技 oppor9plus錄制屏幕在哪
以oppor9plus，Android11為例：手指在手機桌面上從頂部往下滑，滑動後會呼出快捷菜單。在快捷菜單中找到“開始錄屏”的選項，點擊進入。桌面上會出先一個小圖标，倒計時3s後開始錄制屏幕。錄制成後，再次點擊桌面的小按鈕即可完成錄制。OPPOR9Plus：OPPOR9Plus/OPPOR9于2016年3月17日在北京發布，新機将采用一體式金屬機身，2.5D弧面玻璃，超窄邊框，凝光腰線，正面指 2023-06-29
科技提速包是什麼意思
電信流量提速包是針對暢享套餐推出的業務，暢享套餐有流量使用阈值，達到套餐設定的阈值後就會降低網絡速率，用戶可以通過辦理流量提速包業務繼續使用4g網絡速率。提速包資費：1、20元／月“達量限速”閥值增加量2GB。2、40元／月“達量限速”閥值增加量6GB。3、60元／月“達量限速”閥值增加量10GB。 2023-06-29
科技 ps4無法使用網絡功能怎麼辦
1、首先在PS4設備上連接加速器，然後打開計算機”應用程序，然後打開控制面闆”選項，接着打開網絡連接”選項，之後右鍵單擊SKonYou”選項，在彈出的窗口中點擊屬性”選項。2、進入屬性窗口後，點擊共享”一欄，然後點擊本地連接”選項，接着在窗口中找到Windowsfirewall”并保證該程序處于啟動狀态，這樣PS4就不會出現無法連到服務器的問題了。3、設置網線連接的方法更為簡單，将網絡連接到PS4 2023-06-29
科技螞蟻莊園如何雇傭小雞生産肥料
1、打開支付寶螞蟻莊園，點擊下方的小鏟子。2、進入小雞肥料廠，點擊“雇傭小雞”。3、彈出螞蟻莊園的好... 2023-06-29
科技 qq語音怎麼看出是否閉麥
1、首先，我們打開qq的界面，在qq界面中找到我們想要進行語音通話的好友，并進入聊天界面。2、在聊天... 2023-06-29
科技博世角磨機那款比較強力耐用
1、如果說在便宜中挑款好用的選GWS6-100吧，是最多人用的博世十年的産品經過的市場驗證還是可以的... 2023-06-29
科技 jk觸發器的功能
JK觸發器具有置位、複位、保持（記憶）和計數功能；JK觸發器屬于脈沖觸發方式，觸發翻轉隻在時鐘脈沖的負跳變沿發生；由于接收輸入信号的工作在CP下降沿前完成，在下降沿觸發翻轉，在下降沿後觸發器被封鎖，所以不存在一次變化的現象，抗幹擾性能好，工作速度快。JK觸發器是數字電路觸發器中的一種基本電路單元。JK觸發器具有置0、置1、保持和翻轉功能，在各類集成觸發器中，JK觸發器的功能最為齊全。在實際應用中， 2023-06-29
科技天貓補貼金是什麼意思
1、天貓購物津貼就是一種變相的優惠券，購物滿減需要使用購物津貼，買的越多優惠也越多。例如滿200減20津貼，當購買價值200元的物品，實際付款隻有180元。2、天貓購物津貼在消費者端以購物津貼額度的形式顯示，但實際代表的是一種消費者可于購物時按照滿減門檻直接抵減一定面額現金的消費權益，就消費者基于商家所設置的初始滿減門檻所用購物津貼，商家并不能因此獲得與購物津貼額度相等值的現金收入。 2023-06-29
科技瑞麗離緬甸有多遠
1、緬甸離中國瑞麗地圖上的直線距離是380公裡左右，但實際前往由于道路曲折，達到500公裡以上。2、... 2023-06-29
科技 windows7怎麼連接wifi
以Windows7操作系統為例。打開計算機屬性，點擊左側“設備管理器”。在網絡适配器中查看是否裝有無線網卡。若裝有無線網卡，點擊電腦桌面“網絡”圖标，選擇無線網絡，點擊“連接”即可。 2023-06-29
科技微信頭像尺寸是多少
1、微信官方說微信頭像是360*200。2、建議圖片尺寸200X200或300X300寬高，如果大于... 2023-06-29
科技人造月亮原理
1、人造月亮的原理和月球反射太陽光一緻，衛星通過特制的巨大反射鏡定向将太陽光集中投射到一定範圍内。2... 2023-06-29
科技白邊修複液是什麼成分
白邊修複液的原料是矽油。作用是消除手機白邊。現在的手機為了更好的握持手感，都采用2.5D的弧面玻璃，而普通的鋼化膜隻能貼住屏幕中間的平面部分，而對于弧邊的部分則是無能為力，所以就會有白邊。鋼化膜優點：可防止手機不慎撞擊造成玻璃面闆的破碎飛散，減少玻璃面闆的隐性傷害，保障用戶安全。同時防止意外刮花，影響手機美觀。缺點：與其他膜相比顯得比較厚，同時也影響觸摸屏的靈敏性，由于鋼化玻璃硬也脆的特點，整體表 2023-06-29
科技 wrod文檔怎麼做信箋紙
1、首先新加一個word文檔，然後進入【頁面布局】，進入頁邊距。2、在菜單欄中找到【插入】，插入表格... 2023-06-29
科技運算放大器原理
1、假設運放有兩個輸入端a（反相輸入端），b（同相輸入端）和一個輸出端o。也分别被稱為倒向輸入端非倒... 2023-06-29
科技微信号搜不到對方的原因
以Iphone12，ios14，微信7.0.21為例。需确定搜索的對方微信賬号是否正确，一般微信賬号為手機号或對方QQ号。如果确定微信賬号正确，還是查找不到對方賬号，則是對方開啟了不允許搜索。通過微信号搜索；通過手機号搜索；通過QQ号搜索，如果全部關閉的情況下，則查找不到對方賬号。微信是騰訊公司于2011年1月21日推出的一個為智能終端提供即時通訊服務的免費應用程序，由張小龍所帶領的騰訊廣州研發中 2023-06-29
科技手機内屏壞了能修複嗎
1、現在觸屏手機屏搜索幕一共分為3層，外面的玻璃保護層，中間的觸控層，下面的顯示層，如果是内屏損壞指... 2023-06-29
科技蘋果12可用以前充電器嗎
可以。蘋果官網上目前在售的幾個充電器型号有5W、12W、18W、20W、30W充電器，這幾種都可以給iPhone12充電。但充電的速度會比較慢，預計需要2.5-3小時才可以充滿電。其中5W是蘋果長期在iPhone手機包裝裡附帶的充電器，也被稱為是“5V1A”充電器，速度最慢，給iPhone12充電要2.5-3小時才可以充滿。如果你的手上有iPad，那麼舊款的iPad充電器是 2023-06-29
科技養小龍蝦用什麼消毒
1、二氧化氯。用二氧化氯算是一種比較高效的殺菌方法了，其投入水中後會快速反應，生成高純度的二氧化氯氣體實現殺菌的效果。且二氧化氯使用後殘留物較少，一般不會對池塘造成什麼影響，對人體的危害也小。不過這東西殺菌可能比較厲害，可能會把一些有益的細菌也會殺死，尤其是一些用藻類植物進行生物增氧的建議不要使用，其對于藻類影響挺大的。一般來說每畝僅僅需要200克左右。2、聚維酮碘。聚維酮碘的殺菌效果是持續性的， 2023-06-29
科技創維電視内存不足怎麼辦
1、将U盤的名字重命名為COOCAASD，注意必須大寫，如果U盤格式不是FAT32，可以進行格式化。... 2023-06-29
科技小米手環充不進去電怎麼回事
1、檢查米粒的充電接觸點是否有污漬，如果有，就輕輕的清理掉；然後将米粒卡在充電線上；将手環充電線插入... 2023-06-29
科技照片怎麼改大小和尺寸
本期圖文教程制作是由ps軟件為例。1、打開Photoshop，在Photoshop内打開這張圖。2、點擊圖片，選擇“圖像大小”，輸入需要修改的像素，點擊确認，之後保存為JPG格式。修改完成。 2023-06-29
科技系統重裝一半故障怎麼解決
1、重啟電腦，如果能夠正常進入系統，說明上次不正常隻是偶爾的程序或系統運行錯誤，無關緊要。2、如果頻... 2023-06-29
科技電腦開機按F8無法進入安全模式怎麼解...
1、當電腦開機時按“F8”無法正常顯示啟動菜單，從而無法進入“安全模式”界面時，可以嘗試在電腦開機時... 2023-06-29
科技為什麼iphone老是驗證
1、iPhone手機長時間沒有驗證過ID密碼，手機會發起一次驗證。2、當iPhone手機的Apple... 2023-06-29

tft每日頭條

> 科技

> axure實現左側導航欄的展開與收縮

axure實現左側導航欄的展開與收縮

相关科技资讯推荐

热门科技资讯推荐

网友关注