• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure实现两种滑动的方式(附源文件下载)

Axure实现两种滑动的方式(附源文件下载)

作者: @浩程君 字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure源文件,axure rp源文件,axure源文件下载,axure app源文件,axure实现上下滑动等相关知识, @浩程君 希望在学习及工作中可以帮助到您

最近在计划连载一下关于axure中继器的一些教程,通过动态面板,函数,中继器来强化和交流一下对产品的一些看法。我个人的观点是动态面板对应产品的交互设计、产品架构;函数对应产品的业务逻辑,判定等;中继器对应数据结构,数据类型等。

huadongfangshi

光说理论多没意思,跟我一起吧,通过一边看教程一边加深对产品的理解吧。

其实这一篇和中继器关系不大,主要是通过动态面板来设置两种滑动方式。

第一种:偏PC端,用滚动条的方式,滑动鼠标滑轮就可以实现(注意观察图中的光标位置没有变化)。

滑动

滑动鼠标滑轮

第二种:偏移动端,准确来说应该叫拖动。按住鼠标左键,上下拖动。(注意看光标一直在移动)

拖动

按住鼠标左键拖动

OK,废话不多少。一步一步来吧,毕竟滑动效果在日常的工作中是经常会用到的。

一、PC滑动效果的实现

滑动

首先,我们有了一个很长很长的中继器(320*868),小伙伴也可以用一张很长很长的图代替,其实是一个道理。我用的是iphone5的页面尺寸(320*568),超过了页面尺寸,所以我们要来做一个滑动效果。

3

中继器

然后我们在中继器的旁边,拖入一个动态面板(320*568),就像下面一样:

4

中继器+面板

接着,我们来设置一下动态面板的属性,滚动条——自动显示垂直滚动条(图片为初始值)

5

设置滚动条

面板就变成了下面这样:因为滚动条占据了一定的宽度,我们就把面板拉宽一点点(具体多少后面可以调整)

6

右侧有滚动条的面板

然后将中继器放入动态面板(中继器坐标为0,0)中,如下图:

7

中继器进入了动态面板

然后我们F5看看效果,试着将鼠标指针移入页面内,上下滑动鼠标滑轮:

8

实现了滚动

这样就实现了滚动,但是有个滚动条是不是很丑?没关系,看最后一步:

在这个装有中继器的面板旁边,再放一个面板(320*568),这个面板作用就是遮住滚动条,如下,

9

两个面板

最后再将右边装有中继器的面板放到左边的面板内,再点击F5:

滑动

没有滚动条了

OK,学一种滑动的伙伴们就可以看到这里了,这种比较简单,也能模拟出常规的滑动效果,而且可以在手机端演示。还有一种滑动,有兴趣的一起看看吧。

第二种:手机端,拖动滑动效果

拖动

首先我们在中继器的旁边,拖入一个大小相同的动态面板。(我的中继器大小为320*868),如图所示:

左侧面板,右侧中继器,大小相等(面板尺寸也为320*868):

11

然后将面板命名为:content,再将中继器拖入面板中,如下图:(动态面板的状态一修改为repeat)

12

中继器放入面板中

然后在装有中级器的动态面板旁,拖入一个动态面板,尺寸为显示界面的大小(320*568),命名为view。如下:

13

两个面板

再将装有中继器的面板,放入到view(320*568)中,如下:

14

套入面板

然后需要我们来添加用例:

15

解释:为view(320*568)面板添加用例,拖动时,移动面板content(装中继器的面板320*868),设置移动方向为垂直移动。

这样就有了拖动的效果,我们再为它添加边界:

2051268-b77a12031dcaf25b

添加边界

解释:在拖动view(320*568)的过程中其实是拖动content(320*868),所以我们要为content面板移动的距离添加边界。上边界下滑不能离开顶部,所以我们设置边界(顶部小于等于0),即上边界只能往上滑;下边界上滑的界限是content面板和view面板的底部在同一y轴,则其顶部的最高位置为(868-568),因为在负轴所以是-300。

总结:两种滑动各有优劣,个人认为第一种更简单,第二种更逼真。

源文件下载:

作者链接:http://pan.baidu.com/s/1c1KIia??密码: dfec

官方链接:http://pan.baidu.com/s/1eSwmW18 密码: hatx

您可能想查找下面的文章:

  • Axure实现两种滑动的方式(附源文件下载)

相关文章

  • 2017-06-13Axure实例:制作一个通用的移动端内容滚动区
  • 2017-06-13矩形框:深度理解和应用元件样式(二)
  • 2017-06-13Axure教程:中继器如何切换标记状态?
  • 2017-06-14高手在民间 | 手把手教你用Axure制作连连看游戏(附游戏地址)
  • 2017-06-14Axure7.0教程(一)中继器的使用(1)
  • 2017-06-13Axure教程:限制输入框输入字数
  • 2017-06-13Axure教程:用中继器和日期函数实现万年历
  • 2017-06-13Axure教程:原型设计之水泡导航栏
  • 2017-06-14五分钟教你快速上手Axure交互设计
  • 2017-06-13Axure教程:微信聊天列表原型制作(一)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure原型技巧 | 这回我们模拟下键盘输入
    • Axure教程:原型设计之侧滑菜单
    • axure实现坦克游戏原型
    • Axure教程:动态面板实现广告循环播放
    • Axure7.0教程(六)math函数的使用(1)动态面板环状移动
    • Axure教程:如何制作一个不区分大小写的验证码原型?
    • Axure7.0教程(七)math函数的使用(2)Math函数简介
    • axure实现网站的通用注册原型设计
    • Axure教程:如何画出曲线图?
    • Axure基础教程—文本框用法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有