微信小程序scroll-view吸顶css样式化表格的表头及iOS上下滑动表头的颜色覆
微信小程序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内部上下滑动吸顶的现象
正常的上下滑动吸顶覆盖：
https://i-blog.csdnimg.cn/direct/85ef051cea5d487f82edbba4b0f8a253.jpeg
iOS及iPad默认不正常的上下滑动吸顶覆盖：
https://i-blog.csdnimg.cn/direct/71cb2d577563446b9bfb579880e5d390.jpeg
2、原因
iOS及iPad平台，scroll-view组件默认尚未真正完整实现吸顶部分的后代组件覆盖。
3、解决方法
3.1、选中每行子组件提取字段、界限矩形
this.createSelectorQuery()
.select(`#scrollData_{{index}}`)
.boundingClientRect(
res=>res.top
)
.exec(); 然后据此top数值，计算scroll-view的内部view-port视口的布局视口、可视视口及其显隐部分，计算哪些行次在上下滑动的滚动过程中覆盖了表头：
https://i-blog.csdnimg.cn/direct/90a8d54a21314be9bf8be7fb3a0046c3.png
但这样做：
一是计算量大，且伴随scroll-view内部视口的上滑，头几行早就滚出屏幕的可视范围以外；
这一点，可以从获取的top绝对位置数据，可以看到：
https://i-blog.csdnimg.cn/direct/4ea0f59ff4cd46f08baf5c1ec0eb3fad.png
二是将在上下滑滚动的过程中，多行同时命中，会因性能的考虑，必要额外计算并控制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内【滚动吸顶颜色覆盖】的最好办法。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]