Axure无痕滚动条怎么做?

 我来答
猪八戒网
2023-06-28 · 百度认证:重庆猪八戒网络有限公司官方账号
猪八戒网
猪八戒网(zbj.com)创建于2006年,现已形成猪八戒网、天蓬网和线下八戒工场的“双平台+一社区”服务模式,是中国领先的人才共享平台。
向TA提问
展开全部

当使用Axure创建滚动效果时,首先想到的是动态面板。但是动态面板自带的滚动条样式有点难看。有没有办法让这个丑陋的滚动条消失?今天我将和大家分享如何制作一个无痕滚动条。学Axure,先学基础再学交互最后就是动手实操!在,就可以获取到专业全面的Axure自学视频课展开综合学习~专业讲师教学,知识点满满,学会可自主实操设计原型~

Axure无痕滚动条制作教程:

1.第一步:绘制需要滚动的内容使用Axure自带的元件绘制出需要需要滚动的内容,这部分的内容所主要用于动态面板滚动时显示。

2.第二步:转化动态面板绘制完成后,选中所有的元件,在元件上点击右键,选中“转换为动态面板”,也可以使用“Ctrl+Shift+Alt+D”进行。

3.第三步:设置面板尺寸&显示滚动条首选,我们需要将动态面板的高度设置成500,这里的500是一个参考值,随意设置,只需要比动态面板中内容的高度小即可,只有这样才会在滚动时才会出现滚动条。

其次,在动态面板上点击右键,依次选择“滚动条/垂直滚动条”,这里选择垂直滚动条是因为我们绘制的内容是需要垂直滚动的。

当勾选“垂直滚动”后,你会发现一个问题,滚动条盖住了动态面板中的部分内容(如下图所示),也就是说我们需要增加默认动态面板的宽度,以调整被滚动条盖住的部分能够显示。

这里我们将动态面板的宽度增加18就正常了,因为18是axure滚动条的宽度,调整前后对比如下。

4.第四步:隐藏滚动条这里隐藏滚动条的方法,也许有朋友会使用一个新的矩形,将矩形颜色调整为和底色相同,直接覆盖在动态面板上,这的确也是一个方法,但是如果底色复杂,是背景图,或者渐变色,这种方法就不行了。

我使用的方法也很简单,在现有动态面板的基础上,再套一个动态面板,并且将新面板的尺寸设置成250×500,也就是默认动态面板的原始尺寸,以达到隐藏滚动条的目的。

也就是说这里包含了2层动态面板,内层是真正的包含滚动条的动态面板;外层是通过尺寸隐藏滚动条的动态面板。

上图可以看出虚线框,也就是外层动态面板的区域范围,可以看到内层动态面板的滚动条已经在虚线框外了。

刷新预览一下页面感受一下效果

以上就是关于“Axure无痕滚动条怎么做?”的全部内容分享了,怎么样?你学到了吗?Axure学习讲究方法与技巧,如果你觉得你的理解学习能力强,不妨继续浏览更多Axure相关文章~当然,如果你需要更加系统精准地学习Axure,那么我建议你选择我们的Axure自学视频课哦~最后点赞、留言+收藏,下次学习更方便哦~

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式