微信小程序scroll-view吸顶css样式化表格的表头及iOS上下滑动表头的颜色覆盖及性能分析
目录
微信小程序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});
};
};
};
},
4、总结
由3.2、所述，其实不正常的吸顶覆盖，主要是计算滑过吸顶部分的行次对应的view-port组件，其前景色的透明度所致。在iOS和iPad环境解决掉，就好。其它所有平台均不存在该问题。