起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專(zhuān)項(xiàng)技能課
1300+專(zhuān)題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專(zhuān)業(yè)技能直播
會(huì)員專(zhuān)屬社群
榮耀標(biāo)識(shí)Axure入門(mén)案例系列：頁(yè)面模塊水平左右滑動(dòng)
編輯導(dǎo)讀：左右滑動(dòng)的交互方式在APP中非常常用，可以在有限的區(qū)間內(nèi)可以放置更多的內(nèi)容。本文作者分析如何用Axure制作頁(yè)面模塊水平左右滑動(dòng)，希望對(duì)你有幫助。
在APP端中左右滑動(dòng)的交互方式十分常見(jiàn)，在有限的區(qū)間內(nèi)可以放置更多的內(nèi)容。
一、準(zhǔn)備
Axure 9（或Axure 8、10）軟件已安裝。
掌握基本的軟件使用。
二、本教程知識(shí)點(diǎn)
初級(jí)的動(dòng)態(tài)面板使用。
拖動(dòng)觸發(fā)的移動(dòng)的交互事件。
移動(dòng)邊界計(jì)算。
三、詳細(xì)教程
1. 功能
鼠標(biāo)右擊可以將組件內(nèi)容進(jìn)行左右拖動(dòng)。
組件內(nèi)容左右拖動(dòng)有對(duì)應(yīng)的邊界限制。
2. 制作方式
1）基礎(chǔ)動(dòng)態(tài)面板版本
基礎(chǔ)樣式可以將展示內(nèi)容嵌套在動(dòng)態(tài)面板中，利用動(dòng)態(tài)面板的水平滾動(dòng)進(jìn)行功能實(shí)現(xiàn)。
制作時(shí)，需將動(dòng)態(tài)面板的尺寸調(diào)整頁(yè)面寬度，超出內(nèi)容將自動(dòng)隱藏。同時(shí)在預(yù)覽和編輯時(shí)可以看到水平滾動(dòng)條。
動(dòng)態(tài)面板需在高度上預(yù)留一些滾動(dòng)條的顯示位置（注：此類(lèi)效果只能通過(guò)拖動(dòng)滾動(dòng)條實(shí)現(xiàn)滑動(dòng)效果）。
優(yōu)點(diǎn)：可以快速制作，適合低保真原型。
缺點(diǎn)：頁(yè)面預(yù)覽展示存在一個(gè)滾動(dòng)條，并且移動(dòng)只能通過(guò)滾動(dòng)條進(jìn)行移動(dòng)。
2）進(jìn)階版本
針對(duì)動(dòng)態(tài)面板自身的“缺陷”，可以借助交互事件進(jìn)行處理優(yōu)化。此處主要使用拖動(dòng)時(shí)的交互事件結(jié)合移動(dòng)的交互動(dòng)作中的跟隨水平拖動(dòng)進(jìn)行實(shí)現(xiàn)。
（1）設(shè)置移動(dòng)跟隨
需要移動(dòng)的內(nèi)容需要進(jìn)行組合處理。
在拖動(dòng)的交互上進(jìn)行對(duì)應(yīng)內(nèi)容的綁定。
實(shí)現(xiàn)效果如下：
此時(shí)可以實(shí)現(xiàn)對(duì)應(yīng)的拖動(dòng)跟隨，但是沒(méi)有限制對(duì)應(yīng)的左右邊界，在移動(dòng)時(shí)會(huì)將內(nèi)容移出或錯(cuò)位。
（2）限制移動(dòng)跟隨邊界
此處只需添加單側(cè)的位置邊界限制即可。
邊界添加原則
- 添加同側(cè)邊界，方便進(jìn)行快速計(jì)算。
- 左側(cè)邊界移動(dòng)區(qū)間為小于0的區(qū)間，所以需要添加為負(fù)數(shù)區(qū)間。
- 可移動(dòng)最大距離為滑動(dòng)內(nèi)容減去頁(yè)面可視區(qū)域，計(jì)算出的數(shù)值可進(jìn)行賦予負(fù)數(shù)，使得左側(cè)大于此距離。
- 左側(cè)小于一般為0。若在動(dòng)態(tài)面板中存在左右留白間距，需在小于數(shù)值增加間距，大于處減去間距。
3）其它可優(yōu)化區(qū)間
可以借助局部變量，自動(dòng)獲取滑動(dòng)內(nèi)容寬度，通過(guò)函數(shù)自動(dòng)計(jì)算可移動(dòng)范圍。
一般常見(jiàn)的左右滑動(dòng)都是同樣的模塊內(nèi)容展示，可以使用中繼器進(jìn)行快速?gòu)?fù)用，只需后續(xù)編輯調(diào)整中繼器內(nèi)容。達(dá)到原型之間快速?gòu)?fù)用的效果。（可參考案例中的實(shí)戰(zhàn)版本內(nèi)容）。
四、總結(jié)
在基礎(chǔ)元件無(wú)法支持部分效果或效果不理想的時(shí)候可以通過(guò)交互事件進(jìn)行整體交互的重置。
在計(jì)算邊界可借助局部變量、公共變量等自動(dòng)計(jì)算，方便后續(xù)復(fù)用。
#專(zhuān)欄作家#
Brose，微信公眾號(hào)：PMYX，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。關(guān)注廣告營(yíng)銷(xiāo)、K12教育、智慧零售。擅長(zhǎng)系統(tǒng)需求挖掘與功能設(shè)計(jì)。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議。
大佬你好，我按照您的教程實(shí)現(xiàn)了滑動(dòng)，進(jìn)階版的滾動(dòng)條還是存在，想問(wèn)問(wèn)您滑動(dòng)條怎么去掉呀
設(shè)置滾動(dòng)條為不滾動(dòng)就行
看了幾個(gè)教程，終于懂了邊界設(shè)置的原理了，感謝?。?！
大神你好 自己試了好久一直沒(méi)調(diào)試合適，還是基礎(chǔ)不牢固，能否給分享下RP文件呢？273956047@qq.com，萬(wàn)分感謝！
可以試一下把顯示框設(shè)置為一個(gè)動(dòng)態(tài)面板A，動(dòng)態(tài)面板A的state1里面放需要拖拽顯示的內(nèi)容，把這些內(nèi)容再轉(zhuǎn)為一個(gè)動(dòng)態(tài)面板a，然后對(duì)a添加事件dragged>move(with grag x)、animate（none）、trajectory（straight）、boundary（按照博主文章寫(xiě)的去設(shè)置就可以了，都設(shè)置左邊的邊界，非常清晰）
基礎(chǔ)樣式都沒(méi)法復(fù)現(xiàn)??