收藏本站
137-8715-2736
中企宝 首页 新闻资讯 网站建设 查看内容

常规状态下的循环滚动

2017-10-31 21:31 1070
  这个交互在现网中的原型教学中比比皆是,但对于初学者来说,只是知其然不知其所以然,很多细节没有注意到,不能举一反三。具体的操作步骤,我们可以先想一下APP端轮播的效果,都是载入页面之后,banner就会开始轮播,所以我们在“页面载入时”这块加一个交互用例,选择设置面板状态,对dot和banner分别进行设置。对于banner和dot面板,都要在状态选择里面勾选“next”,next表示针对面板当前的状态的下一个状态。并且勾选下面的向后循环,向后循环的意思是:如果当前面板是最后一个状态,next会跳到面板的第一个状态。有些同学会误认为向后循环勾选了,面板就会一直轮播下去,其实不然。要想让面板轮播,还需勾选上“循环间隔”,这样才能保证面板的循环轮播。

  接下来就是细节上的优化,通常的轮播,banner会有一个从左到右的一个路径,而dot的交互样式是红点逐渐的变为灰色,灰点逐渐的变为红色。所以针对banner和dot有不同的动画效果,banner选择“向左滑动”,dot选择“逐渐”。完成之后点击保存,运行一下我们会发现,刚进入页面的时候面板就已经开始轮播,第一个状态我们都没来得及看就变成第二个了,这时我们应该在“页面载入时”加一个等待一秒钟的交互,再运行一遍效果就好了很多。
  


上一篇:手指往左往右滑动的样式改变
下一篇:seo优化新手为什么会失败,原因在哪