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

Question

我的微信小程序需要展示表格 所以我就用 scroll-view结合 position: sticky封装的table，表格需要固定顶部和左侧 但是在ios端会抖动（左右滑动时，上下会动 ，上下滑动时，左右会动）现在实在没好的解决方案了 这是在开发者社区也看到了网友遇到了同样的问题 （ https://developers.weixin.qq.com/community/develop/doc/0000ce94cf82088d3ecfe99c856800）
这是代码片段https://developers.weixin.qq.com/s/zv7pHpmI7eI2
这个表格封装 有没有别的好的思路 谁能帮忙封装个demo 200元钱感谢费 ，到时候微信转账，我微信17863661960

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

问题分析：

根据描述，表格需要固定顶部和左侧，所以使用了scroll-view和position: sticky来实现。但是在iOS端会出现抖动的问题，即在左右滑动时，上下会动，而在上下滑动时，左右会动。这个问题在安卓端不是很明显。

这个问题的出现是由于position: sticky在iOS上的实现方式和安卓上不同导致的。在iOS上，当滚动到sticky元素的位置时，会触发一次重排和重绘，这就会导致页面的抖动。

解决方案：

为了解决这个问题，可以尝试以下几个方法：

1. 使用position: fixed代替position: sticky

将position: sticky替换为position: fixed。position: fixed可以在iOS上更好地实现固定效果，并且不会出现抖动问题。但是注意，使用position: fixed会脱离正常的文档流，可能会对页面布局产生影响，需要根据具体情况进行调整。

以下是一个示例代码：

<scroll-view scroll-x="{{true}}" scroll-y="{{true}}" style="width: 100%; height: 100%;">
  <view style="width: {{tableWidth}}px;">
    <table>
      <thead>
        <tr>
          <th><view class="sticky">Header 1</view></th>
          <th><view class="sticky">Header 2</view></th>
          <!-- 其他表头列 -->
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><view>Cell 1</view></td>
          <td><view>Cell 2</view></td>
          <!-- 其他数据单元格 -->
        </tr>
        <!-- 其他行 -->
      </tbody>
    </table>
  </view>
</scroll-view>

// CSS
.sticky {
  position: fixed;
  top: 0;
  background-color: #fff;
  z-index: 99;
}

注意：由于position: fixed会脱离正常的文档流，可能会对页面布局产生影响，特别是在移动设备上，如果表格较大，可能会超出屏幕范围，需要在样式中设置适当的宽度和高度，以及考虑滚动条的显示和布局调整。

2. 使用view代替table来实现表格布局

如果使用table标签来展示表格的效果并不是必须的，可以考虑使用一些布局和样式来实现类似的效果，以避免position: sticky在iOS上的抖动问题。

以下是一个示例代码：

<scroll-view scroll-x="{{true}}" scroll-y="{{true}}" style="width: 100%; height: 100%;">
  <view style="width: {{tableWidth}}px;">
    <view class="row">
      <view class="header">Header 1</view>
      <view class="header">Header 2</view>
      <!-- 其他表头列 -->
    </view>
    <view class="content">
      <view class="cell">Cell 1</view>
      <view class="cell">Cell 2</view>
      <!-- 其他数据单元格 -->
    </view>
    <!-- 其他行 -->
  </view>
</scroll-view>

// CSS
.row {
  display: flex;
  flex-direction: row;
}
.header {
  flex: 1;
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 99;
}
.content {
  display: flex;
  flex-direction: column;
  margin-top: {{headerHeight}}px; // 根据表头高度设置内容的偏移量
}
.cell {
  flex: 1;
  border-bottom: 1px solid #ccc;
}

注意：使用view代替table来实现表格布局时，需要根据具体需求调整样式，并考虑滚动条的显示和布局调整。

总结：

以上是解决微信小程序表格在iOS端抖动问题的两个方法，可以根据具体情况选择其中一种或结合使用。在使用position: fixed或view代替table时，需要注意样式调整和布局适配。