微信小程序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内部上下滑动吸顶的现象

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

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

      2、原因

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

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

1. this.createSelectorQuery()
2.   .select(`#scrollData_{{index}}`)
3.   .boundingClientRect(
4.       res=>res.top
5.   )
6. .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组件的可视视口内部，【局部渲染】，这种方法不会带来性能上的负面影响。

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

复制代码

       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企服之家，中国第一个企服评测及商务社交产业平台。