微信小程序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、解决方法

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

this.createSelectorQuery().select(`#scrollData_{{index}}`).boundingClientRect(res=>res.top)
.exec();

       然后据此top数值，计算scroll-view的内部view-port视口的布局视口、可视视口及其显隐部分，计算哪些行次在上下滑动的滚动过程中覆盖了表头：

       但这样做：

       一是计算量大，且伴随scroll-view内部视口的上滑，头几行早就滚出屏幕的可视范围以外；

       这一点，可以从获取的top绝对位置数据，可以看到：

       二是将在上下滑滚动的过程中，多行同时命中，会因性能的考虑，需要额外计算并控制scroll-view内部的在屏行数，然后在做选中，否则数组行数过多，会带来性能问题。

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

       由于在上下滑滚动的过程中，各行次的view均在scroll-view组件内部产生相对位置的变化，它们并不会使得scroll-view组件的布局视口发生改变，也不会使得scroll-view组件的可视视口发生改变，故而，页面整体不会发生【重排】，scroll-view组件的可视视口也未发生【重排】，因此，不会产生页面的【重新渲染】，仅仅会在scroll-view组件的可视视口内部，【局部渲染】，这种方法不会带来性能上的负面影响。

  onScrollView_scroll(e) {if (e.currentTarget.id==='mystickycontainer') {onScroll_scrollTop = e.detail.scrollTop;//滚动到顶部===0___注意不要用其this.setData({})__逻辑层向视图层高频次传输数据__超级影响性能if (this.data.platform==='ios'||this.data.platform==='ipad'||this.data.platform==='devtools') {tableRowsColor_scrolled = tableRowsColor.map((element,index) => {if ( onScroll_scrollTop>=((index+1)*mytableHeaderHeight)-((mytableHeaderHeight-rootFontSize)/2)  && onScroll_scrollTop<=((index+2)*mytableHeaderHeight)-((mytableHeaderHeight-rootFontSize)/2)  ) {//滚动到和表头重叠区域__就让其颜色透明__从而显示表头的颜色和背景return `#00000000`;} else {return `#000000FF`;//iOS下black即#000000带透明度默认值#000000FF 带透明度#000000FF};});if ([...tableRowsColor_scrolled]!==[...this.data.tableRowsColor]) {this.setData({tableRowsColor: tableRowsColor_scrolled});};};};},

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

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

       但：经测试发现，z-index对iOS和iPad平台来说，在scroll-view内部slot子组件，z-index是有效的，它允许覆盖上述规则。

       由于在微信小程序的scroll-view组件内部，仍旧可以设置多个不同slot插槽，每级插入子组件的z-index的order整数值，可能会影响到滚动数据经过吸顶表头的表现，这主要时针对iOS和iPad。

       默认未设置z-index的滚动slot子组件，默认在scroll-view组件内部的z-index===0。

       可将scroll-view内除默认“refresher”下拉刷新以外最高层级的吸顶封装子组件的z-index设置高一些比如2000，这样即便不设置【3.2】中所述的颜色透明度，也能更好的解决问题。

      4、总结

       由3.2、所述，其实不正常的吸顶覆盖，主要是计算滑过吸顶部分的行次对应的view-port组件，其前景色的透明度所致。在iOS和iPad环境解决掉，就好。其它所有平台均不存在该问题。

       由3.3、所述，这是真正终极的解决iOS和iPad在scroll-view内【滚动吸顶颜色覆盖】的最好办法。