下面我将向大家分享一下我的解决方法

作者:武汉味美食家餐饮管理有限公司 来源:www.cj17917.com 发布时间:2018-10-15 13:36:54
Axure教程:移动端原型页面横纵向滑动同时实现 axureyuanxigndandu

现在,移动端已经逐渐超越了PC端成为了主流,各种手机APP称出不穷,占据了我们的绝大多数生活,尤其是微信。无论吃饭、休息,还是工作,我们总不时地拿出手机,从消息的最顶端往下滑,直至看完所有的小红点,然后从右往左滑过通讯录,滑到发现,又是朋友圈的一轮疯狂阅读与点赞。喝点鸡汤,寻点乐趣,我们的生活确实这么无趣。那么,在做原型的时候如何实现刚刚所说的横纵向移动呢?下面我将向大家分享一下我的解决方法,希望能帮助到大家。

效果动态:

gif8

原材料:

图1

步骤/方法第一步:设置按钮的选中效果和组

同时选中xiaoxi和tongxunlu—元件属性与样式“属性”—在“输入选项组名称”中输入“组”(输入其他也可以)

同时选中xiaoxi和tongxunlu—元件属性与样式“属性”—选中—勾选“字体颜色”选择白色—在“填充颜色”选择灰色—点击确定

仅选中xiaoxi—元件属性与样式“属性”­—勾选“选中”,使其在一开始页面载入后默认状态为选中。

图2

图3

第二步:设置两层动态面板

通过移动将消息页面和通讯录页面合并在一起,同时选中消息页面和通讯录页面—右键单击—转换为动态面板—设置动态面板名称为“d1”。

在微#界面的展示区域内画一个动态面板,使其大小与展示区域相同并重合,设置动态面板名称为“d2”.

将动态面板d1复制到动态面板d2的一个子层级里面,并将d2的位置设置为“x:0;y:0”。

图4

tu5

第三步:设置横纵向滑动的交互动作

选中动态面板d2—元件交互与说明“交互”—点击“拖动时”—移动—勾选“d1(动态面板)”—移动“垂直拖动”;动画“无”。完成后结果如下图

图6

选中动态面板d2—元件交互与说明“交互”—点击“向左拖动结束时”—编辑条件—选择“选中状态”“xiaoxi”“=”“值”“true”。(如下图)

图7

继续,选择“移动”—勾选“d1(动态面板)”—移动“绝对位置”“x:-320”—点击fx—在“添加局部变量中”设置“d1”=“元件”“d1”—插入变量或函数—在元件中选择“y”—将[[this.y]]改成[[d1.y]]—点击“确定”返回上级页面—动画“线性”,时间“300”毫秒—点击确定。

图8

图9

继续,在添加动作中选择“设置选中”—选中—勾选“tongxunlu”—设置选中状态为“值”“true”。

图10

同理,按照移动相反方向设置“向右拖动结束时”的交互动作,完成后如下图。

图11

第四步:设置上下移动限制条件

推荐阅读/观看:随州网站建设 http://szwzkf.cn


  • 上一篇:Snap前技术大牛:腾讯为什么看上了这家美国公司
  • 下一篇:最后一页
  • 
    COPYRIGHT © 2015 武汉味美食家餐饮管理有限公司 ALL RIGHTS RESERVED.
    本站所有原创信息,未经许可请勿任意转载或复制使用 网站地图 技术支持:肥猫科技
    精彩专题:网站建设
    购买本站友情链接、项目合作请联系客服QQ:2500-38-100