“?左右滑動內容，并限制滑動的范圍”

這是《Axure9百例》系列第26篇

在得到首頁的TOP50/TOP100推薦榜單中，有課程、聽書和電子書的推薦，共3項內容，可左右水平拖動，且只能在指定范圍內拖動。

操作簡單卻又十分常見，知道怎么實現么？

這是演示效果：

01

—

界面布局

列表里的每項內容布局設計不作詳細解釋，在一個矩形框內有標題、頭像和列表，這里準備了低保真的樣式如下：

將內容全部選中，Ctrl+D鍵連續復制兩個(或者Ctrl+C后按下Ctrl鍵拖動復制)，水平排列，修改文字內容。

這種水平列表的布局設計上需要明白一點，為什么第二項內容只顯示了一半。現在可能稍微了解一點交互和設計的人都能看出來，目的是引導用戶右側還有內容，可以向左滑動，因為這種顯示部分內容的設計，天性讓我們下意識的向左邊滑動繼續查看。

最后，我們選中所有內容，右鍵轉成動態面板，命名為list，然后再次右鍵將list轉成動態面板，調整外層動態面板的寬度和屏幕一樣寬。

思考：為什么轉換兩次動態面板？

這是比較常見有疑問的地方，詳細解釋一下：

1、外層的動態面板是為了限制內容的顯示范圍，這是它的樣式特性，這里是設置為屏幕的寬度范圍內，因為我們只需要在屏幕寬度內顯示即可。

2、里層的內容列表也轉換為動態面板是利用了它的事件特性，只有動態面板才支持拖動的事件。里面的動態面板是“自適應寬度”的，保持了原始內容的長度。

好了，布局就這樣了。

02

—

交互處理

動態面板的拖動事件可以加在里層動態面板list上，也可以加到外層動態面板上，但拖動的對象要是里面的list。

這里我們把事件加到外面動態面板上，選擇外層動態面板，新建交互：拖動時，添加移動動作，目標對象選擇list，移動方式選擇為跟隨水平拖動，這樣系統就會限制我們只能在水平方向上移動，避免拖動時上下偏離了水平位置。

接下來設置一下“更多選項”中的參數，用來限制拖動的水平范圍。

我們首先要看一下列表的寬度和屏幕的寬度，然后來計算水平方向上限制的范圍。

1、屏幕的寬度為414，但左位置是從10開始的，因此外層動態面板寬度顯示為404

2、內容的列表的寬度為764

從列表list的位置來看，向右拖動時，只能拖動到初始位置，也就是左側<=0

向左拖動時，要保證第3項內容在屏幕上完全可見，因此位置就是764-404=360，也就是向左偏移360，即左側>=-360，可以適當放寬一點，讓右側多空出些位置，考慮左側>=-370。(也可以通過設置右側的位置來限制范圍，留給勤奮的你來試試)

大功告成，來試下。。

03

—

小結

這個案例主要是應用了動態面板的兩個特性，一個是樣式特性，顯示固定區域的內容，另一個是事件特性，支持拖動事件。

這里注意一下，有的人可能發現“為啥我的移動的設置里看不到跟隨水平拖動的選項？”，這個選項只在“拖動時”事件里有，在“開始拖動時”事件里是沒有的。

留下小問題，下面的交互細節更能體現拖動時的趣味性：

1、如何在向右拖動超過位置0時，自動彈回到原處？

2、相反，如何在向左拖動超過最右邊位置時，自動彈回？

今天是不是又進步了一點點~給自己點個贊~

往期回顧

【Axure9百例】25.得到交互設計-返回頂部

【Axure9百例】24.得到交互設計-底部導航菜單

【Axure9百例】23.側邊欄的顯示和隱藏

總結

以上是生活随笔為你收集整理的宽度如何设置 滑动条_【Axure9百例】26.得到交互设计左右滑动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。