Axure8.0|移動端上下滑動不出屏
制作高保真原型的時候,常常需要將屏幕上下滑動,今天和大家分享的是通過多動態(tài)面板套用實現(xiàn)上下滑動不會超出屏幕框架。
一、元件準備
top(頭部)、beijing(背景)、bottom(底部)、cours(課程)、drag(拖動)。
注:top和bottom保持在頂層,beijing為矩形,此處應(yīng)去掉邊框,cours和drag是動態(tài)面板,所有元件的寬度相同
二、排版
beijing緊挨top底邊且對齊放置,bottom緊挨beijing底部放置,接著course以頭部對齊的方式覆蓋到beijing上,最后drag以頭部對齊的方式覆蓋到course上。
注:如果bottom之前忘記點擊頂層,是會被覆蓋住,這個時候要將其放置頂層。
三、添加用例
1 drag移動時,移動course動態(tài)面板,默認跟隨。
2 drag拖動時,自身垂直拖動。
3 drag拖動時,編輯條件 如果drag的頂部大于top的底部,則drag移動到絕對位置(達到) ?x:0, ?y:[[t.bottom]]。
4?drag拖動時,編輯條件 如果drag的底部小于bottom的頂部,則drag移動到絕對位置(達到) ?x:0, ?y:[[b.top-d.height)]]。
5將排版好的原型再次轉(zhuǎn)換成動態(tài)面板,嵌到高保真手機殼上,并且將新的動態(tài)面板的底邊向上拉動,直到與bottom的底邊重合。
四、效果
具體效果請到如下網(wǎng)址查看:http://67r9k4.axshare.com/#g=1&p=index。
作者:樂悠悠 ? QQ:714226583,目前在找工作
本文由 @樂悠悠 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
第三步,作者應(yīng)該表述錯了,應(yīng)該是‘’編輯條件 如果drag的頂部小于top的底部‘’
您好,有哪位大神知道,滾動界面上如何做點擊切換動態(tài)面板效果的功能嗎??
完了,還是不是很懂TAT
你好 為什么我cours的內(nèi)容到了頂部或者底部以后不會停止 還繼續(xù)滑動呢,是不是判斷出了點問題呢?
不是很明白 如果是做滑動的效果 做兩層動態(tài)面板 設(shè)置滾動就好啦 ??
可以加一下QQ么?
course的怎么樣才能只顯示drag的高度的內(nèi)容呢
會了 ??
沒懂
這個用8.0的添加頂部邊界,底部邊界 ?? , 幾秒就弄好了。。。。
可以加一下你QQ請教一下么
請問在哪里添加哦
親,能加你qq嗎?有點問題,幫忙看下 http://x10w6c.axshare.com
你好,我的問題 跟你一樣的 請問解決了嗎 能否留個聯(lián)系方式
為什么我這里沒有跟隨呢
8.0以后添加邊界比這個簡單多了吧 ??
是的,但是研究了一下,沒做出來 ?
每天學(xué)個小技巧,一個月后就變成Axure大牛了。
加油 : ??
7.0 可以加2個線轉(zhuǎn)化為動態(tài)面板。 用條件中的原件范圍接觸的方式進行判斷
8.0 在設(shè)置移動時,下面有個添加邊界,設(shè)置移動范圍
都要簡單多
我試一下看看 謝謝。
@周關(guān)利 能加一下你的qq嗎?
125078878
1、元素說明
外層 一個固定大小的動態(tài)面板,高度640;固定屏幕
里面 一個自動調(diào)整為內(nèi)容尺寸的面板,高度1000,長頁面
2、期望動作
在外層固定面板中,可以手動滑動長頁面。 并且長頁面在一個固定的一個范圍內(nèi)滑動。 (長頁面不出屏)
3、操作
在外層動態(tài)面板的狀態(tài)1中,創(chuàng)建長頁面的動態(tài)面板。
在狀態(tài)1中,對長頁面動態(tài)面板設(shè)置“拖動時”事件
添加動作“移動-長頁面面板”設(shè)置垂直移動
添加移動邊界
頂部 大于等于 負 (長頁面高度 – 外層固定頁面高度)
底部 小于等于 長頁面高度
頂部 大于等于 負360
底部 小于等于 1000
就可以了
好的,學(xué)會了,謝謝。
我tm花了一晚上學(xué)完你的教程,才看到下面這評論!! ??
?? ?? ??
我的咋都不滾動???
我的也不滾動,請問你解決了嗎
受教啦!
感謝感謝!
太感謝你啦,你的回答完美解決我的問題?。?/p>