当前位置：首页 > news >正文

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

news 2025/9/13 0:11:08

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

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

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

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

2、原因

3、解决方法

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

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

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});};};};},