English
Appearance
该组件用于充当滚动容器,通过对滚动状态的监听来动态渲染某些元素并添加动画,也支持模拟滚动驱动动画
注
Highly experimental
组件内部维护了一些滚动相关的状态,通过getSlots便可使用这些状态动态渲染插槽,决定插槽是否展示以及切换展示时的动画效果
getSlots
export type ScrollViewState = { width: number; height: number; /** x轴滚动距离 */ scrollX: number; scrollY: number; scrolling: boolean; /** x轴是否溢出 */ xOverflow: boolean; yOverflow: boolean; /** 是否在x轴向前滚动了 */ xForward: boolean; /** 是否在x轴向后滚动了 */ xBackward: boolean; yForward: boolean; yBackward: boolean; };
通过CSS变量--scroll-x-progress和--scroll-y-progress即可获取当前滚动进度(小数0~1),以此设置样式便可模拟滚动驱动动画。
--scroll-x-progress
--scroll-y-progress
通过scrollXPercentVarName和scrollYPercentVarName可以自定义这两个CSS变量名
scrollXPercentVarName
scrollYPercentVarName
当浏览器支持registerProperty时会自动将它们注册为数值自定义变量,以便使用
通过observeView属性可以开启滚动视图监听,其可以指定一个或多个子元素为监听目标,当目标视图在l-scroll-view滚动进度发生变化时会更新对应CSS变量或触发回调,以此便可实现对应动画效果
observeView
l-scroll-view
该特性等有空再来补充完整,有些边界情况还没有弄清。使用原生实现如下: