微信小程序scroll-view吸顶css样式化表格的表头及iOS上下滑动表头的颜色覆盖、z-index应用及性能分析

微信小程序scroll-view吸顶css样式化表格的表头及iOS上下滑动表头的颜色覆盖、z-index应用及性能分析

目录

微信小程序scroll-view吸顶css样式化表格的表头及iOS上下滑动表头的颜色覆盖、z-index应用及性能分析

       1、iOS在scroll-view内部上下滑动吸顶的现象

        正常的上下滑动吸顶覆盖：

        iOS及iPad默认不正常的上下滑动吸顶覆盖：

      2、原因

      3、解决方法

       3.1、选中每行子组件提取字段、边界矩形

       3.2、直接根据scroll-view在滚动事件中相对其顶部的滚动高度换算行次

       3.3、根除的办法z-index的应用

      4、总结

        在微信小程序组件scroll-view内部，z-index无任何实际意义，因为该组件内部的slot插槽默认就未去实现支持z-index的分层，它总是默认H5的规则，后插入的子组件覆盖前置子组件的z-index。

       因此，当插入posotion定位为sticky粘滞元素，特别是在元素吸顶时，scroll-view上滑滚动覆盖吸顶元素时，需要注意操作系统【平台】的差异性，否则文字颜色或其它前景色，会在此吸顶位置出现怪异。

       1、iOS在scroll-view内部上下滑动吸顶的现象

        正常的上下滑动吸顶覆盖：

        iOS及iPad默认不正常的上下滑动吸顶覆盖：

      2、原因

       iOS及iPad平台，scroll-view组件默认尚未真正完整实现吸顶部分的后代组件覆盖。

      3、解决方法