本次教各位小伙伴使用內(nèi)聯(lián)框架來實(shí)現(xiàn)頁面滾動，除此之外還會有一些小案例 ~

先來看看 天貓 首頁 頂部欄 的效果 ~

（以上圖片已是上傳的極限， 各位看官要是看不清，請自行下載天貓，打開首頁觀看）

所以今天我們就拿天貓首頁的頂部欄為例子，來講解在 Axure 里面是如何制作的 ?。?/p>

一、準(zhǔn)備元件

先看圖：

（以上圖片分三部分講，背景元件色值為：#E4E4E4，下面不重復(fù)講）

1.首先新建 Axure 文件，頂部電量條可由大家隨意制作（ w：375 ，h：20 ），如果有相關(guān)組件庫的小伙伴可直接拖入 ；

2.頂部欄區(qū)域，拖進(jìn)一個元件當(dāng)做背景（ w：375 ，h：44 ），從 阿里巴巴矢量圖標(biāo)庫 （ http://www.iconfont.cn ）下載以下 icon 如圖擺放即可 ；

3.在頂部欄區(qū)域的下面，拖進(jìn)一個元件當(dāng)做背景（ w：375 ，h：44 ），再在該元件上面放置一個純白色矩形（ w：335 ，h：30 ），命名：“ 輸入框背景 ”、一個文本框（ w：290 ，h：28 ），命名：“ 輸入框 ” 、一個搜索 icon?（ w：14?，h：14 ），命名：“ 搜索 icon ” 。把 輸入框背景、輸入框、搜索icon 選中右鍵點(diǎn)擊組合，命名：“ 輸入框控件 ” ，完成 ；

完成以上的元件準(zhǔn)備，然后我們先把他放置在一旁，等待使用…

4.然后把第一個頁面命名為：“ 外頁 ” ，在新增一個頁面命名為：“ 內(nèi)頁 ” ，拖動 “ 內(nèi)頁 ” 為 “ 外頁 ” 的子級，如圖 ：

5.然后我們雙擊進(jìn)入 外頁 的頁面，從左側(cè)組件庫拖進(jìn)一個內(nèi)聯(lián)框架（ w：375 ，h：667 ），為了美觀我們在這個內(nèi)聯(lián)框架底部再拖進(jìn)一個矩形（ w：377 ，h：669 ），然后我們點(diǎn)擊內(nèi)聯(lián)框架，在右側(cè)屬性 – 內(nèi)聯(lián)框架 – 選擇框架目標(biāo) – 內(nèi)頁 – 確定。

繼續(xù)點(diǎn)擊內(nèi)聯(lián)框架，右鍵點(diǎn)擊 – 轉(zhuǎn)換成動態(tài)面板 ，把該面板“ 自動調(diào)整為內(nèi)容尺寸 ”，然后進(jìn)入該動態(tài)面板，把內(nèi)聯(lián)框架的寬高都增加 17 px，如圖 ：

6.把剛才步驟?1 – 3 的內(nèi)容，放入到內(nèi)頁里面（ x ：0 ，y ：0 ），內(nèi)頁的內(nèi)容比較緊靠左上角，這樣才不會出現(xiàn)待會移動的時候體驗(yàn)不好，如圖 ：

7.全選以上圖片所有內(nèi)容，右鍵點(diǎn)擊 轉(zhuǎn)換為動態(tài)面板 ，在右側(cè)屬性設(shè)置 – 固定在瀏覽器 – 水平固定：左 、垂直固定：上 。如圖：

8.然后我們在該原型的下方任意放置矩形，在每個矩形里添加 1、2、3 文字，增加識別度 ：

完成以上的所有部分，可以先生成預(yù)覽看一下效果了 ~

以上就做好了所有的元件準(zhǔn)備，內(nèi)容比較多（ 因?yàn)橛行┬』锇閯偨佑| Axure ，拆分得比較細(xì)，各位老司機(jī)將就一下 ~ ），弄完之后我們就可以開始下一步操作了 ~

二、設(shè)置交互用例

1.雙擊進(jìn)入內(nèi)頁，在頁面的空白處設(shè)置 窗口滾動時（Case 1） ：

a.設(shè)置條件：值 – [[Window.scrollY]] – 大于等于 – 5 ；

b.移動輸入框控件 – 移動：絕對 – x 為：60 ，y 為：27 – 動畫：線性 – 時間：250 毫秒 ；

c.設(shè)置尺寸：“ 輸入框 ” w ：170 ，h ：28 – 錨點(diǎn)：左上角 – 動畫：線性 – 時間：250 毫秒 、“ 輸入框背景 ”?w ：215 ，h ：30 – 錨點(diǎn)：左上角 – 動畫：線性 – 時間：250 毫秒 ；

d.設(shè)置 “ 背景 ” – 隱藏 – 動畫：向上滑動 – 時間：500毫秒 ；

2.雙擊進(jìn)入內(nèi)頁，在頁面的空白處設(shè)置 窗口滾動時（Case 2） ：

a.設(shè)置條件：值 – [[Window.scrollY]] – 小于 – 5 ；

b.設(shè)置 “ 背景 ” – 顯示 – 動畫：向下滑動 – 時間：500毫秒 ；

c.移動輸入框控件 – 移動：絕對 – x 為：20 ，y 為：71 – 動畫：線性 – 時間：250 毫秒 ；

d.設(shè)置尺寸：“ 輸入框 ” w ：290 ，h ：28 – 錨點(diǎn)：左上角 – 動畫：線性 – 時間：250 毫秒 、“ 輸入框背景 ”?w ：335 ，h ：30 – 錨點(diǎn)：左上角 – 動畫：線性 – 時間：250 毫秒 ；

以上完成之后就可以得到以下效果了，是不是很簡單？

然后我們完成以上步驟之后，我們還可以在該頁面的下面放置一個 “ 返回頂部 ” 的 icon ，意為：當(dāng)我們下滑到一定位置時，顯示 “ 返回頂部 ” icon ，點(diǎn)擊該 icon 時，返回至頂部并隱藏 “ 返回頂部 ” icon …

下面我們來開始制作 ~

三、進(jìn)階

1.從左側(cè)元件庫拉出一條橫向水平線，長度小于 375 px 即可，命名為：“ 頂部 ” ，然后置于底層；

2.拉入一個作為 “ 返回頂部 ” 的 icon （?w：40，y：40?），或者隨意拉一個矩形代替都可以；

3.點(diǎn)擊 icon 右鍵轉(zhuǎn)換為動態(tài)面板，右側(cè)設(shè)置固定到瀏覽器（此處跟以上相同設(shè)置即可）；

4.設(shè)置 “ 返回頂部 ” icon 交互用戶，鼠標(biāo)單擊時 – 滾動到元件<錨鏈接> – 勾選：頂部 – 僅垂直滾動 – 動畫：線性 – 時間：250 毫秒 ；

5.把 “ 返回頂部 ” icon 放置在內(nèi)頁（ x：315，y:586 ）的位置，點(diǎn)擊隱藏 ；

6.在內(nèi)頁的空白處設(shè)置 窗口滾動時（Case 3） ：

a.設(shè)置條件：值 – [[Window.scrollY]] – 大于等于 – 500 ；

b.顯示 “ 返回頂部 ” icon – 動畫：逐漸 – 時間：250 毫秒；

7.在內(nèi)頁的空白處設(shè)置 窗口滾動時（Case 4） ：

a.設(shè)置條件：值 – [[Window.scrollY]] – 小于 – 500 ；

b.隱藏 “ 返回頂部 ” icon – 動畫：逐漸 – 時間：250 毫秒；

完成以上設(shè)置就可以了，下面我們來看一下效果 ~

好的，以上就是本次的所有講解，謝謝大家??！

該文件百度云鏈接:https://pan.baidu.com/s/1OqQuVDe5HclUm6f6NyH30A? 密碼:05wb

需要的可以下載看看。同時有相關(guān)問題的可在以下留言區(qū)留言，我將第一時間回復(fù) ~

本文由 @李桂東 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議