位置:主页 > 桥式滤水管 >
Axure教程:屏幕纵向切换
发布日期:2021-09-17 01:01   来源:未知   阅读:

  减肥产品排行榜10强通过鼠标滚轮的前滚及后滚操作,实现屏幕纵向的上翻页和下翻页效果,其实不难。一起来学习吧。

  CurPic:表示当前屏幕显示的是第几幅图片。页面载入时,这个变量为1,即第一幅图片。当判断出是上翻页、还是下翻页后,可以根据这个变量,决定下一个页面。

  CurScrolly:表示当前窗口滚动的纵向坐标。页面载入时,这个变量为0。鼠标滚轮滚动后,会有一个滚动到的纵向坐标[[Window.scrollY]],比较这个坐标和本变量,就可以判断出是向下滚轮,还是向上滚轮。

  Lock:表示页面滚动的锁定状态。这个变量为0,表示未锁定,可以滚动;为1则表示锁定,页面不可以滚动了。页面载入时,这个变量为0。此变量很关键,可以防止“窗口滚动时”频繁被触发(感兴趣的同学可以删除这个变量,体验下风中凌乱的效果)。

  从上到下,首尾相连依次为矩形1(顶部导航)、图片1、图片2、图片3、图片4、矩形2(底部导航)。Anchor1放在(x=0,y=0)的位置也就是图片1的左上方,Anchor2放在图片2的左上方,依次类推。

  在矩形1(顶部导航)上点击鼠标右键,转换成动态面板,并设置动态面板固定到浏览器左上方。这样一来,窗口在滚动时,顶部导航会一直保持在浏览器顶部。

  对页面的属性“窗口滚动时”进行处理。如果窗口滚动后的纵坐标[[Window.scrollY]]大于当前窗口滚动的纵向坐标CurScrolly,则可以判定为向下翻页。

  则控制窗口垂直滚动到图片2的锚点Anchor2的位置。同时,也需要设定当前显示的图片为图片2,当前窗口滚动的纵向坐标CurScrolly为Anchor2的位置。还有一个最重要的设定,那就是把滚动锁Lock锁上1000毫秒。

  如果窗口滚动后的纵坐标[[Window.scrollY]]小于当前窗口滚动的纵向坐标CurScrolly,则可以判定为向上翻页。至于向上翻页的处理,和向下翻页类似,这里不再赘述。

  本原型比较简单,感兴趣的同学可以继续在此基础上扩展练习,比如增加可以手动切换图片的四个点状按钮。

  有同学质疑:产品经理是否需要制作复杂的原型呢?交给开发做好了。的确,原型不是万能的。但是,掌握一些原型制作的技巧,对产品经理来说,无疑是个加分项。

  本文由 @pahelia 原创发布于人人都是产品经理。未经许可,禁止转载。

  我用Axure9版本跟着做,还是实现不了,我也不太明白全局变量的名称是不是系统的还是自己写上去,还有CurPic==1,1是局部变量的图片1的意思吗,楼主请发一份源文件给我参考下,邮箱是,谢谢(要是楼主能出个视频讲解就更好了)

  比较不明白的是CurPic、Lock这些变量的值是自己设定的还是系统的啊,为啥系统里面没找到,自己设定如何设定呢

  怎么都出不来效果,我在做的项目需要这个效果香港最快现场开奖直播,好急,作者能不能给个原件啊 😥

  [[Window.scrollY]],这个纵向坐标是要自己设置吗?实际操作的时候有点懵~~~

  为什么我找不到好多东西呢,例如:滚动事例,还有第二个设置值~~~~~~~~,是改版本了吗?

  首先可以写个简单的计划测试下页面的“窗口滚动时”事件是否生效,比如可以在窗口滚动时,设置一个TXT文本控件的内容,看看TXT文本内容是否发生改变;

  听到很多言论说在中国程序员是吃青春饭的,那么产品经理呢,也吃青春饭吗?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

感谢阅读,欢迎再来!