.

9.触发器:触发页面滚动

老赵发表于:2016年11月24日 20:34:14更新于:2021年02月19日 19:04:35

一、案例效果

《点击体验效果》

blob.png
Demo案例:扫描二维码查看效果



二、应用场景

长页面H5作品,无需翻页而显得轻快,但如果要增加一些上下滚动的控制,就需要使用 “触发页面滚动”:在案例中,点击上方的导航菜单,可以快速定位到指定位置。


三、功能设置

1.首先得完成长页面的内容准备;

2.在合适的位置,建议添加使用锚点组件来标记,这样会比较清晰

blob.png


3.通过触发器,比如点击触发 “触发页面滚动” 到 “锚点S”

0015836dfccf2d2f6b1b890d50f248d

0015836dfd4674774e243cbf35ac3e4


4.“触发页面滚动”的滚动方式

滚动方式说明
到底部触发滚动至长页面底部
到顶部触发滚动至长页面顶部
到元素触发滚动至指定元素的Y坐标位置
下一锚点在过个锚点之间滚动切换
上一锚点在过个锚点之间滚动切换


(1)到指定元素:建议使用锚点,这样逻辑上更清晰、并且还可以借助于锚点、进行滚动到位置时的触发;当然也可以指定到其他任意组件,这里就是定位到组件的Y坐标了。


(2)上一锚点/下一锚点:请参照下图理解

blob.png



--------- 不了解设计的程序员不是好客服 ---------------

回复(2)