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

在原型展示時，有些頁面過長，需要可以上下滑動，如何讓頁面能夠拖動鼠標實現上下滑動？

效果圖如下：

可直接點擊鏈接查看頁面滑動效果：https://btuqkp.axshare.com

準備

操作環境：Windows系統（小編目前Windows系統，不過蘋果的axure操作應該差別不大）

軟件：Axure RP8

演示原件：

1. 拖入一個動態面板，w=375，h=667（一般手機屏幕的像素大?。?，位置隨意哦
2. 拖入兩條水平線，w=375，h=1
3. 在動態面板的state1內拖入一個矩形（我用圖片代替），w=375，h=1135，位置：x=0，y=0

設置原件樣式及名稱

（1）將一條線放到動態面板頂部，（可以將線的顏色變為透明）命名為頂部線

（2）同理將另一條線放在動態面板底部，（可以將線的顏色變為透明）命名為底部線。

（3）動態面板的state1內拖入的矩形（我用圖片代替）命名為“滑動圖片”，動態面板命名為“滑動面板”。

設置交互樣式

（1）單擊“滑動面板”，設置“右側工具欄屬性——拖動時”交互。

雙擊“拖動時”進入“拖動時”交互設置面板，用例名稱case1設置如下：

添加動作模塊選擇“移動”，配置動作模塊勾選“滑動圖片”原件，移動選擇“垂直移動”。

點擊確定，設置完成后交互顯示如下：

（2）設置“右側工具欄屬性–拖動結束時”交互。

第一步：雙擊“拖動結束時”進入“拖動結束時”交互設置面板，用例名稱case1設置如下：

點擊“添加條件”，彈出條件彈框設置彈框，選擇如下圖條件，點擊確定。

第二步：添加動作模塊選擇“移動”，配置動作模塊勾選“滑動圖片”原件，移動選擇“絕對位置，x=0，y=0”，動畫選擇“線性”時間“200毫秒”。

點擊確定，設置完成后交互顯示如下：

此時已經設置好case1，此處是滑動頁面與頂部的交互，讓滑動頁面在離開頂部范圍后能自動滑回頂部。

第三步，雙擊“拖動結束時”進入“拖動結束時”交互設置面板，用例名稱case2設置如下：點擊“添加條件”，彈出條件彈框設置彈框，選擇如下圖條件，點擊確定。

第四步：添加動作模塊選擇“移動”，配置動作模塊勾選“滑動圖片”原件，移動選擇“絕對位置，x=0，y=-468”，動畫選擇“線性”時間“200毫秒”。

點擊確定，設置完成后交互顯示如下：

此時已經設置好case2，此處是滑動頁面與底部的交互，讓滑動頁面在離開底部范圍后能自動滑回底部。

以上就設置完成啦，最終的“滑動面板”設置交互樣式如下：

小白問答：

問題：如果里面的滑動圖片有自己獨立交互怎么辦？

答案：可以將其組合或者設置成動態面板，此時設置的交互就要設置移動此組合或者動態面板了哦。

問題：底部移動的絕對位置怎么算？

答案：用圖片長度減去外部滑動面板的長度就是大概的正數值了，然后根據需要再調一調，記得一定在數值前加個負號哦。我的圖片長度1135-667=468。所以Y值設置的-468。

問題：為什么要設置動畫線性移動200毫秒？

答案：為了讓頁面在滑動后返回的效果更加柔和，移動時間可以根據需要調節哦。

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

題圖來自Unsplash，基于CC0協議