中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本次教各位小伙伴使用內聯框架來實現頁面滾動，除此之外還會有一些小案例 ~

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

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

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

一、準備元件

先看圖：

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

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

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

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

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

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

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

繼續點擊內聯框架，右鍵點擊 – 轉換成動態面板 ，把該面板“ 自動調整為內容尺寸 ”，然后進入該動態面板，把內聯框架的寬高都增加 17 px，如圖 ：

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

7.全選以上圖片所有內容，右鍵點擊 轉換為動態面板 ，在右側屬性設置 – 固定在瀏覽器 – 水平固定：左 、垂直固定：上 。如圖：

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

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

以上就做好了所有的元件準備，內容比較多（ 因為有些小伙伴剛接觸 Axure ，拆分得比較細，各位老司機將就一下 ~ ），弄完之后我們就可以開始下一步操作了 ~

二、設置交互用例

1.雙擊進入內頁，在頁面的空白處設置 窗口滾動時（Case 1） ：

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

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

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

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

2.雙擊進入內頁，在頁面的空白處設置 窗口滾動時（Case 2） ：

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

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

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

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

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

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

下面我們來開始制作 ~

三、進階

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

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

3.點擊 icon 右鍵轉換為動態面板，右側設置固定到瀏覽器（此處跟以上相同設置即可）；

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

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

6.在內頁的空白處設置 窗口滾動時（Case 3） ：

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

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

7.在內頁的空白處設置 窗口滾動時（Case 4） ：

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

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

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

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

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

需要的可以下載看看。同時有相關問題的可在以下留言區留言，我將第一時間回復 ~

本文由 @李桂東 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議