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

編輯導語：產品中我們經常會遇到上下滑動的頁面，比如我們在進行預覽頁面時，需要上下滑動進行查看；本文作者分享了關于實現移動端頁面上下滑動效果的Axure教程，我們一起來了解一下。

案例展示：https://ctm29p.axshare.com/#id=1btojr

工具：Axure RP9

本文章會介紹2種實現頁面上下滑動效果的方法（學會這兩種方法就夠用了）。

01 方法一：（超級便捷）

這個方法重點是利用了“動態面板”的“滾動條”垂直滾動的功能是實現內容上下滑動的效果。

設計思路如下：

1. 先畫出頁面基本結構

如下圖：基于（375*667）iPhone8的寬高，頂部和底部2個矩形（375*50），中間1個動態面板（375*567）。

2. 對動態面板進行設置（重點來了）

1）填充滾動預覽的內容：雙擊【動態面板】，進入state1，然后再里面那個框框里填東西，使勁填，至少要填超過動態面板的高度。

2）實現內容滾動：關閉state1，然后選中【動態面板】右擊選中【滾動條】選擇【垂直滾動】。

或者如下圖操作：

點擊“預覽”，上下滑動的效果就實現了，so easy！但是你會發現中有一條滾動條在右邊好抓狂，影響美觀。

3）隱藏滾動條：下面介紹兩種方法

1. 我們可以用一個矩形這個滾動條給遮擋起來（魔高一尺道高一丈，(￣▽￣)／嘚瑟）如下圖：

2. (這個會比1好點不會遮擋到邊界的內容)拉寬動態面板，讓滾動條區域到頁面尺寸外（即：是要先設置頁面尺寸，例如我的案例都是基于iPhone8的頁面尺寸）
（這個方法來自評論區一個小可愛，感謝小可愛??）

點擊預覽，完美。

02 方法二：（沒有滾動條的煩惱）

這個方法比方法一稍微難理解一丟丟，可以跟著下面的操作步驟一邊操作一邊理解額。

這個方法是在于對動態面板2的內容會跟隨操作動態面板1的滾動而移動，并對滑動界限設置。

設計思路如下：

gif動態來源于：http://www.aharts.cn/rp/420885.html

1. 先畫出頁面基本結構

一如既往先畫個模型，如下圖：基于（375*667）iPhone8的寬高，頂部和底部2個矩形（375*50），中間1個動態面板1（375*567），再在動態面板1的state1中添加一個動態面板2（375*567）。

2. 漸進明細

1）在動態面板2的state1中填充內容；使勁填充內容，至少要填超過動態面板1的高度，完成后才能看到滑動效果。

2）拖動 動態面板1 時，動態面板2跟隨垂直拖動而移動；選中【動態面板1】點擊【新建交互】選中【拖動時】-【移動】目標選擇“動態面板2”，移動選擇“跟隨垂直拖動”點擊“完成”，如圖下設置：

3）拖動結束 動態面板1時，如果動態面板2未接觸到頂部矩形時，移動動態面板2開頭回到頂部。

• 選中【動態面板1】點擊【新建交互】選擇【拖動結束時】點擊【啟用情形】；
• 添加情形1：如果范圍于 動態面板2 未接觸 范圍于 頂部矩形；
• 在情形1下添加動作：【添加動作】-【移動】動態面板2 到達 (0,0) 點擊“完成”；如下圖設置：

4）拖動結束 動態面板1時，如果動態面板2未接觸到底部矩形時，移動動態面板2結尾回到底部；操作步驟和（3）基本一致。

• 在【拖動結束時】添加情形2：如果范圍于 動態面板2 未接觸 范圍于 底部矩形；
• 在情形2下添加動作：【添加動作】-【移動】動態面板2 到達 (0,-222) 點擊“完成”；如下圖設置：（tip：動態面板1的高 – 動態面板2的高 = -222）。

點擊預覽，完美。

終于寫完了o(╥﹏╥)o，希望也能幫到有緣的你們額。

本文由 @人事匆匆 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。