今天我們來介紹一個簡單的基本交互——頁面拖動。看如何實現(xiàn)頁面拖動效果，enjoy~

想必有不少做移動端的新手同學(xué)都有這么一個煩惱，頁面想展現(xiàn)手機內(nèi)容可以上下滑動，但卻無法實現(xiàn)，只能靠PRD文檔進行標(biāo)注，有的時候真的會感到灰心，所以今天小白白就來教大家怎么去實現(xiàn)這個效果。

涉及元件：文本框、動態(tài)面板；內(nèi)容：“拖動時”狀態(tài)；

步驟如下：

（1）添加矩形/文本框，填充亂假文；將該元件設(shè)置為動態(tài)面板；命名“展示內(nèi)容面板”。

（2）對動態(tài)面板設(shè)置狀態(tài)，“拖動時-移動-選擇內(nèi)容”，因為想要對內(nèi)容進行滑動而不是對屏幕整體移動，所以選擇動態(tài)面板下的“內(nèi)容”。（注：沒有漢化的Axure，拖動時的英文是“Dragged”）

（3）因為是手機，所以選擇“垂直移動”，到目前為止就可以實現(xiàn)內(nèi)容的上下滑動了，但是當(dāng)前的滑動是無休止的滑動，所以接著我們還要進行下一步。

（4）設(shè)置頂部，底部范圍

頂部：小于等于0，底部：大于等于474。

設(shè)置范圍的口訣是：頂部小于等于動態(tài)面板內(nèi)部的起始位置，底部大于等于動態(tài)面板外部的終止位置。

之后保存并點擊瀏覽查看效果，一個簡單的頁面拖動效果就實現(xiàn)了。

交互的rp文件，朋友們可以下載查看詳情：https://pan.baidu.com/s/1JoYJNEN0znpT3bLDBEIhQQ

下期我對這個效果進行難度的提升，進行APP下拉刷新的實現(xiàn)。

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

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