这章节我们将讲解两个内容:

(1)滑动吸附顶部

(2)回到顶部的使用

先来看第一个:滑动吸附顶部。下图是原始图片:

实战案例5——滑动吸附顶部和回到顶部

窗口往上滑动到一定位置后(我们在里面增加了热区来做检测),红色边框部分会保持不动

实战案例5——滑动吸附顶部和回到顶部

思路:

可以在窗口滑动动作里增加一个事件,判断窗口滑动到热区的top时,红色边框部分就不移动了。

具体事件请参考如下图

实战案例5——滑动吸附顶部和回到顶部

接着我们来分析如何“回到顶部”。

首先设计的逻辑是这样的:当窗口滑动到超过一个屏的时候,“回到顶部”标识就会弹出来,点击它就会回到顶部;否则该标识就会一直隐藏。

接着我们开始设计原型:

(1)设计“回到顶部”的原型

实战案例5——滑动吸附顶部和回到顶部

(2)增加页面顶部的热区

(3)增加点击回到顶部的事件:

实战案例5——滑动吸附顶部和回到顶部

(4)设置隐藏

(5)页面滑动的事件

实战案例5——滑动吸附顶部和回到顶部

相关文章:

  • 2021-05-15
  • 2021-08-09
  • 2022-12-23
  • 2022-12-23
  • 2018-08-21
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-01-01
  • 2022-01-01
  • 2022-12-23
  • 2022-12-23
  • 2021-09-25
  • 2022-12-23
相关资源
相似解决方案