微信小程序表格封装在ios端会抖动问题

Question

我的微信小程序需要展示表格 所以我就用 scroll-view结合 position: sticky封装的table，表格需要固定顶部和左侧 但是在ios端会抖动（左右滑动时，左侧会抖动 ，上下滑动时，表头会抖动）现在实在没好的解决方案了
这是代码片段https://developers.weixin.qq.com/s/zv7pHpmI7eI2
这个表格封装 有没有好的思路 必有答谢费
以下是QQ群交流群 先扫码加群

Answer 1

结合GPT给出回答如下请题主参考
可能是因为在iOS中，当滚动到边缘时，惯性滚动会导致表格抖动。针对这个问题，可以尝试进行以下优化：

1. 优化滚动事件

在iOS中，滚动事件会触发频繁，如果表格中有大量DOM元素，会导致性能问题。可以尝试对滚动事件进行优化，例如：

• 添加防抖或节流函数，减少事件触发次数。
• 对表格中的DOM元素进行虚拟化渲染，只渲染当前可见区域的元素，减少DOM数量。

1. 使用translate属性进行位移

在iOS中，使用position:sticky属性会导致滚动时元素抖动。可以尝试改用translate属性进行位移，例如：

.table-header {
  position: relative;
  transform: translate(0, 0);
}
.table-header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(0, var(--scroll-top));
}

其中，--scroll-top为变量，表示当前滚动距离。

1. 使用CSS硬件加速

在iOS中，使用CSS硬件加速可以提高滚动的流畅度。可以尝试使用以下CSS属性：

transform: translateZ(0);
-webkit-transform: translateZ(0);

这些优化可以提高表格在iOS中的性能和流畅度，但具体实施还需要根据实际情况进行调整。以下是一个基本的表格封装代码示例，供参考：

<!-- table.wxml -->
<scroll-view class="table-scroll"
  scroll-x="{{true}}"
  scroll-y="{{true}}"
  bindscroll="onScroll"
>
  <view class="table-wrapper" style="width: {{tableWidth}}px;">
    <view class="table-header sticky" style="width: {{fixedLeftWidth}}px; height: {{headerHeight}}px;">
      <!-- 左侧固定列 -->
    </view>
    <view class="table-header" style="width: {{scrollWidth}}px; height: {{headerHeight}}px;">
      <!-- 可滚动列 -->
    </view>
    <view class="table-body" style="width: {{tableWidth}}px; height: {{bodyHeight}}px;">
      <!-- 表格主体 -->
    </view>
  </view>
</scroll-view>

// table.js
Component({
  properties: {
    columns: Array, // 表格列配置
    data: Array, // 表格数据
    scrollHeight: Number, // 表格高度
    colWidth: Number, // 列宽度
    rowHeight: Number, // 行高度
    fixedColumns: Number, // 固定列数
    headerHeight: Number, // 表头高度
  },
  data: {
    scrollTop: 0,
    fixedLeftWidth: 0,
    scrollWidth: 0,
  },
  methods: {
    onScroll(e) {
      const { scrollLeft, scrollTop } = e.detail;
      this.setData({
        scrollTop,
        fixedLeftWidth: Math.min(scrollLeft, this.data.fixedColumns * this.data.colWidth),
      });
    },
  },
  lifetimes: {
    ready() {
      const { columns, data, colWidth, rowHeight, fixedColumns, headerHeight } = this.data;
      const tableWidth = columns.length * colWidth;
      const bodyHeight = data.length * rowHeight;
      const scrollWidth = (columns.length - fixedColumns) * colWidth;
      this.setData({
        tableWidth,
        bodyHeight,
        scrollWidth,
        headerHeight,
      });
    },
  },
});