主要內(nèi)容

在天貓APP中，窗口滾動(dòng)到導(dǎo)航1時(shí)，導(dǎo)航1固定在瀏覽器的頂部，跟隨窗口滾動(dòng)，滾動(dòng)到導(dǎo)航2時(shí)，導(dǎo)航2固定在瀏覽器的頂部，跟隨窗口滾動(dòng)，本課我們學(xué)習(xí)使用axure函數(shù)和頁(yè)面交互事件來(lái)實(shí)現(xiàn)這個(gè)效果。

交互效果

1.窗口滾動(dòng)到導(dǎo)航1位置時(shí)，導(dǎo)航1固定在瀏覽器的頂部，跟隨窗口滾動(dòng)。

2.窗口滾動(dòng)到導(dǎo)航2位置時(shí)，導(dǎo)航2固定在瀏覽器的頂部，跟隨窗口滾動(dòng)。

一、原型制作

步驟1：

導(dǎo)入天貓頻道首頁(yè)的圖片到編輯區(qū)，設(shè)置位置與大小，x:0，y:0，w:360，h:1570（因是范例，所以直接用圖片代替）

步驟2：

導(dǎo)入導(dǎo)航1到編輯區(qū)，設(shè)置位置與大小：x:0，y:114，w:360，h:43（因是范例，所以直接用圖片代替），命名：導(dǎo)航1

步驟3：

導(dǎo)入導(dǎo)航2到編輯區(qū)，設(shè)置位置與大小：x:0，y:512，w:360，h:44（因是范例，所以直接用圖片代替），命名：導(dǎo)航2

二、設(shè)置頁(yè)面“窗口滾動(dòng)時(shí)”事件

步驟4：

用例1：雙擊頁(yè)面交互下的“窗口滾動(dòng)時(shí)”事件

第一步：編輯條件，選擇“值”，點(diǎn)擊后面的“fx”打開編輯文字窗口，選擇窗口函數(shù)“Window.scrollY”，設(shè)置條件：[[Window.scrollY]]" ≥ "116"

第二步：選擇“移動(dòng)”

第四步：移動(dòng)“導(dǎo)航1”到絕對(duì)位置，x:0,y:Window.scrollY

移動(dòng)“導(dǎo)航2”到絕對(duì)位置，x:0,y:512

步驟5：

用例2：參考用例1，雙擊頁(yè)面交互下的“窗口滾動(dòng)時(shí)”事件，打開用例編輯器

第一步：編輯條件：設(shè)置條件：[[Window.scrollY]]" ≥ "512"

第二步：選擇“移動(dòng)”

第四步：移動(dòng)“導(dǎo)航2”到絕對(duì)位置，x:0,y:Window.scrollY

移動(dòng)“導(dǎo)航1”到絕對(duì)位置，x:0,y:114

選中用例2，選擇“切換IF/ELSE IF”

步驟6：生成原型，預(yù)覽效果

關(guān)于陪學(xué)網(wǎng)（www.pexue.com）：我們6年來(lái)專注于產(chǎn)品管理類課程的開發(fā)與制作，志在為產(chǎn)品經(jīng)理、交互設(shè)計(jì)、平面設(shè)計(jì)、需求人員分享最新、最好的產(chǎn)品類課程。學(xué)員遍布國(guó)內(nèi)外知名互聯(lián)網(wǎng)產(chǎn)品團(tuán)隊(duì)：百度、新浪、騰訊、領(lǐng)英等