很多朋友在使用Axure制作移動端原型時(shí)抄邀,希望內(nèi)容區(qū)域在固定的區(qū)域內(nèi)滾動耘眨,但是轉(zhuǎn)換為動態(tài)面板后,顯示滾動條會使美觀度大打折扣境肾,本文將介紹3個(gè)可以隱藏滾動條的小tips剔难。
- 方法一:使用設(shè)備模版素材進(jìn)行遮擋?-
1.按照下圖所示準(zhǔn)備好所有的元件,頁面排列方式選擇居中奥喻,這樣可以保證預(yù)覽時(shí)我們內(nèi)容始終是頁面居中顯示的偶宫。
2.選中「內(nèi)容區(qū)」的所有元件,右鍵轉(zhuǎn)換動態(tài)面板衫嵌。
3.調(diào)整動態(tài)面板的高度读宙,使其小于內(nèi)部內(nèi)容區(qū)的高度,右鍵-【滾動條】-選擇【垂直滾動】楔绞,這時(shí)候動態(tài)面板右側(cè)會出現(xiàn)一條滾動條结闸。
4.拉寬動態(tài)面板,使?jié)L動條位于內(nèi)容區(qū)之外酒朵。
5.拖入我們設(shè)備模版素材桦锄,置于所有元件圖層的頂層,調(diào)整內(nèi)容區(qū)動態(tài)面板的寬度和位置蔫耽,使設(shè)備模版可以遮擋住我們的滾動條即可结耀。
預(yù)覽效果:
當(dāng)然設(shè)備素材也可以用一條和矩形等高等寬的矩形元件來替換,置于滾動條之上即可匙铡。
- 方法二:轉(zhuǎn)換兩次動態(tài)面板?-
方法一僅限于設(shè)備模版素材的寬度足以遮擋住滾動條的情況图甜,如果不想添加設(shè)備素材,或設(shè)備素材的邊框比較寬度不足以遮擋滾動條時(shí)鳖眼,我們可以通過轉(zhuǎn)換兩次動態(tài)面板的方式來遮擋黑毅。
1.首先按照方法一中的步驟1-4制作出第一層動態(tài)面板,在此動態(tài)面板的基礎(chǔ)上右鍵再次轉(zhuǎn)換為動態(tài)面板钦讳。
2.將外層動態(tài)面板的寬度調(diào)至和「內(nèi)容區(qū)」一致矿瘦,這時(shí)就能遮擋住內(nèi)層動態(tài)面板的滾動條了,這樣既實(shí)現(xiàn)滾動效果又完美的隱藏了滾動條愿卒。
預(yù)覽效果:
- 方法三:利用內(nèi)聯(lián)框架結(jié)合動態(tài)面板實(shí)現(xiàn)?-
1.首先在內(nèi)容區(qū)內(nèi)拖入一個(gè)內(nèi)聯(lián)框架的元件缚去,在右側(cè)樣式面板中勾選【隱藏邊框】,調(diào)整內(nèi)聯(lián)框架寬度和高度琼开,使?jié)L動條超出內(nèi)容區(qū)易结。
2.新增一個(gè)頁面,命名為「內(nèi)容頁」柜候,內(nèi)容區(qū)的高度大于內(nèi)聯(lián)框架的高度搞动,在內(nèi)容頁內(nèi)填充好內(nèi)容。雙擊之前拖入的內(nèi)聯(lián)框架改橘,鏈接到「內(nèi)容頁」滋尉。
3.右鍵將內(nèi)聯(lián)框架轉(zhuǎn)化為動態(tài)面板,同樣將動態(tài)面板的寬度調(diào)小至能遮擋住內(nèi)聯(lián)框架的滾動條即可飞主。
預(yù)覽效果:
原型預(yù)覽鏈接:
http://daisyaxure.com/demo/Case001
請復(fù)制以上鏈接至電腦瀏覽器查看效果(附源文件下載鏈接)