起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程：屏幕縱向切換
通過鼠標(biāo)滾輪的前滾及后滾操作，實(shí)現(xiàn)屏幕縱向的上翻頁和下翻頁效果，其實(shí)不難。一起來學(xué)習(xí)吧。
一、原型效果
二、準(zhǔn)備工作
本文原型是在1366*768分辨率下完成的。
元件
- 矩形：2個(gè)，矩形1和矩形2。其中，矩形1為頂部導(dǎo)航條，矩形2為底部導(dǎo)航條。兩個(gè)矩形的大小都為1366*51。
- 圖片：4張，每張大小為1366*589。
- 熱區(qū)：4個(gè)，分別命名為Anchor1、Anchor2、Anchor3、Anchor4。這四個(gè)熱區(qū)元件用來作為窗口滾動(dòng)到指定圖片的錨點(diǎn)。大小為50*51。
全局變量
CurPic：表示當(dāng)前屏幕顯示的是第幾幅圖片。頁面載入時(shí)，這個(gè)變量為1，即第一幅圖片。當(dāng)判斷出是上翻頁、還是下翻頁后，可以根據(jù)這個(gè)變量，決定下一個(gè)頁面。
CurScrolly：表示當(dāng)前窗口滾動(dòng)的縱向坐標(biāo)。頁面載入時(shí)，這個(gè)變量為0。鼠標(biāo)滾輪滾動(dòng)后，會(huì)有一個(gè)滾動(dòng)到的縱向坐標(biāo)[[Window.scrollY]]，比較這個(gè)坐標(biāo)和本變量，就可以判斷出是向下滾輪，還是向上滾輪。
Lock：表示頁面滾動(dòng)的鎖定狀態(tài)。這個(gè)變量為0，表示未鎖定，可以滾動(dòng)；為1則表示鎖定，頁面不可以滾動(dòng)了。頁面載入時(shí)，這個(gè)變量為0。此變量很關(guān)鍵，可以防止“窗口滾動(dòng)時(shí)”頻繁被觸發(fā)（感興趣的同學(xué)可以刪除這個(gè)變量，體驗(yàn)下風(fēng)中凌亂的效果）。
三、制作步驟
1、把元件擺好
從上到下，首尾相連依次為矩形1（頂部導(dǎo)航）、圖片1、圖片2、圖片3、圖片4、矩形2（底部導(dǎo)航）。Anchor1放在（x=0，y=0）的位置也就是圖片1的左上方，Anchor2放在圖片2的左上方，依次類推。
在矩形1（頂部導(dǎo)航）上點(diǎn)擊鼠標(biāo)右鍵，轉(zhuǎn)換成動(dòng)態(tài)面板，并設(shè)置動(dòng)態(tài)面板固定到瀏覽器左上方。這樣一來，窗口在滾動(dòng)時(shí)，頂部導(dǎo)航會(huì)一直保持在瀏覽器頂部。
2、窗口滾動(dòng)的判斷處理
對(duì)頁面的屬性“窗口滾動(dòng)時(shí)”進(jìn)行處理。如果窗口滾動(dòng)后的縱坐標(biāo)[[Window.scrollY]]大于當(dāng)前窗口滾動(dòng)的縱向坐標(biāo)CurScrolly，則可以判定為向下翻頁。
如果當(dāng)前顯示的是圖片1，并且滾動(dòng)沒有被鎖定：
則控制窗口垂直滾動(dòng)到圖片2的錨點(diǎn)Anchor2的位置。同時(shí)，也需要設(shè)定當(dāng)前顯示的圖片為圖片2，當(dāng)前窗口滾動(dòng)的縱向坐標(biāo)CurScrolly為Anchor2的位置。還有一個(gè)最重要的設(shè)定，那就是把滾動(dòng)鎖Lock鎖上1000毫秒。
如果當(dāng)前顯示的是圖片2，可以參照上面介紹的圖片1進(jìn)行類似處理。
如果窗口滾動(dòng)后的縱坐標(biāo)[[Window.scrollY]]小于當(dāng)前窗口滾動(dòng)的縱向坐標(biāo)CurScrolly，則可以判定為向上翻頁。至于向上翻頁的處理，和向下翻頁類似，這里不再贅述。
完整處理：
四、簡單總結(jié)
本原型比較簡單，感興趣的同學(xué)可以繼續(xù)在此基礎(chǔ)上擴(kuò)展練習(xí)，比如增加可以手動(dòng)切換圖片的四個(gè)點(diǎn)狀按鈕。
有同學(xué)質(zhì)疑：產(chǎn)品經(jīng)理是否需要制作復(fù)雜的原型呢？交給開發(fā)做好了。的確，原型不是萬能的。但是，掌握一些原型制作的技巧，對(duì)產(chǎn)品經(jīng)理來說，無疑是個(gè)加分項(xiàng)。
本文由 @pahelia 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
我照著做了 但是沒出來效果 有大佬幫我找到原因了QAQ?。。》窒斫o大家 可以自檢一下
就是創(chuàng)建的變量值需要給它們?cè)O(shè)置默認(rèn)值，對(duì)應(yīng)數(shù)值如下：
CurPic：1
CurScrolly：0
Lock：0
求源文件 我也是照著做了 一模一樣啊但就是沒效果
315091820@qq.com
你好，可以發(fā)一下源文件嗎？萬分感謝！1559822982@qq.com
我用Axure9版本跟著做，還是實(shí)現(xiàn)不了，我也不太明白全局變量的名稱是不是系統(tǒng)的還是自己寫上去，還有CurPic==1，1是局部變量的圖片1的意思嗎，樓主請(qǐng)發(fā)一份源文件給我參考下，郵箱是1042333676@qq.com，謝謝（要是樓主能出個(gè)視頻講解就更好了）
過了好幾年再要源文件是不是要不到啦(灬? ?灬)
親，想要記得源文件????1162857282@qq.com
你好，可以發(fā)一下源文件嗎？萬分感謝！1396539901@qq.com
比較不明白的是CurPic、Lock這些變量的值是自己設(shè)定的還是系統(tǒng)的啊，為啥系統(tǒng)里面沒找到，自己設(shè)定如何設(shè)定呢
對(duì)于Axure8，打開頂部菜單的“Project”->”Global Variables…”，然后在其中增加自定義的全局變量。
LZ 能發(fā)下源文件嗎 謝謝 805406719@qq.com(照著做效果出不來)
已發(fā)，請(qǐng)查收
源文件能發(fā)我嗎，1042333676@qq.com，謝謝
您好 請(qǐng)問源文件還在嗎 可以給我一份嗎 求315091820@qq.com
照著做了沒效果，求源文件，謝謝，著急用，372257417@qq.com!謝謝
已發(fā)，請(qǐng)查收
您好 請(qǐng)問源文件還在嗎 可以給我一份嗎 求315091820@qq.com
怎么都出不來效果，我在做的項(xiàng)目需要這個(gè)效果，好急，作者能不能給個(gè)原件啊 ??
給個(gè)郵箱
2513328849@qq.com 萬分感謝！?。。。?！
您好 請(qǐng)問源文件還在嗎 可以給我一份嗎 求315091820@qq.com
2513328849@qq感謝
[[Window.scrollY]]，這個(gè)縱向坐標(biāo)是要自己設(shè)置嗎？實(shí)際操作的時(shí)候有點(diǎn)懵~~~
這個(gè)坐標(biāo)是系統(tǒng)自帶的變量，在設(shè)置條件時(shí)，可以選擇的。
為什么我找不到好多東西呢，例如：滾動(dòng)事例，還有第二個(gè)設(shè)置值~~~~~~~~，是改版本了嗎？
滾動(dòng)事例是頁面的屬性，可以點(diǎn)擊頁面的空白地方
為什么沒有效果啊？
是鼠標(biāo)滾動(dòng)沒反應(yīng)嗎
設(shè)置完畢后，鼠標(biāo)滾動(dòng)無反應(yīng)，求指教。
首先可以寫個(gè)簡單的計(jì)劃測(cè)試下頁面的“窗口滾動(dòng)時(shí)”事件是否生效，比如可以在窗口滾動(dòng)時(shí)，設(shè)置一個(gè)TXT文本控件的內(nèi)容，看看TXT文本內(nèi)容是否發(fā)生改變；
如果生效了，再檢查具體的窗口滾動(dòng)事件內(nèi)容代碼
我找了好長時(shí)間，就是不知道這個(gè)叫什么名字，現(xiàn)在終于找到了
我也是摸索了一陣才調(diào)試好