taro开发微信小程序使用scroll-view封装的table，滚动时抖动

Question

使用taro开发微信小程序，用scroll-view和position: sticky封装一个table组件，固定了表头和左侧，在ios端滑动时,表头或者左侧会抖动，怎么解决啊，以下是代码
https://developers.weixin.qq.com/community/develop/doc/00082685098a70cb17305796061400%E6%89%93%E5%BC%80%E8%BF%99%E4%B8%AA%E9%93%BE%E6%8E%A5%E6%9F%A5%E7%9C%8B%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5

<!-- fixed-table.wxml -->
<view class="table-container">
 <view class="empty">
        我是空白
      </view>
  <!-- 表格主体部分 -->
  <scroll-view enhanced="{{true}}" show-scrollbar="{{fales}}" class="table-scroll" scroll-x="{{true}}" scroll-y="{{true}}" bindscroll="onScroll">
    <view class="cell-wrap">
      <!-- 空的部分 -->
     
      <!-- 表头部分 -->
      <view class="header-row">
        <view class="fixed-cell">
       
        </view>
        <view class="cell">
          表头 1
        </view>
        <view class="cell">
          表头 2
        </view>
        <view class="cell">
          表头3
        </view>
        <view class="cell">
          表头 4
        </view>
        <view class="cell">
          表头 5
        </view>
        <view class="cell">
          表头 6
        </view>
        <view class="cell">
          表头 7
        </view>
        <view class="cell">
          表头 8
        </view>
        <view class="cell">
          表头 9
        </view>
        <view class="cell">
          表头 10
        </view>
        <view class="cell">
          表头 11
        </view>
        <view class="cell">
          表头 12
        </view>
        <view class="cell">
          表头 13
        </view>
        <view class="cell">
          表头14
        </view>
        <view class="cell">
          表头 15
        </view>
        <view class="cell">
          表头 16
        </view>
        <view class="cell">
          表头 17
        </view>
      </view>
      <!-- 表格内容区 -->
      <view class="content">
        <view class="row">
          <view class="fixed-cell"> 内容 0</view>
          <view class="cell"> 内容 1</view>
          <view class="cell"> 内容 2</view>
          <view class="cell"> 内容 3</view>
          <view class="cell"> 内容 4</view>
          <view class="cell"> 内容 5</view>
          <view class="cell"> 内容 6</view>
          <view class="cell"> 内容 7</view>
          <view class="cell"> 内容 8</view>
          <view class="cell"> 内容 9</view>
          <view class="cell"> 内容 10</view>
          <view class="cell"> 内容 11</view>
          <view class="cell"> 内容 12</view>
          <view class="cell"> 内容 13</view>
          <view class="cell"> 内容 14</view>
          <view class="cell"> 内容 15</view>
          <view class="cell"> 内容 16</view>
          <view class="cell"> 内容 17</view>
        </view>
      
      </view>
    </view>
  </scroll-view>
</view>

/* fixed-table.wxss */

.table-container {
  display: flex;
  flex-direction: column;
  height: 80vh;
  /* 设置表格高度 */
  /* padding:0 0rpx 24rpx 24rpx; */
  overflow: hidden;
}

.table-scroll {
  flex: 1;
  overflow: auto;
  position: relative;
}

.table-scroll>view {
  width: 100%;
}

.header-row,
.row {
  display: flex;
}

.content .cell {
  flex: 1;
  padding: 40rpx 24rpx;
  min-width: 160rpx;
  max-width: 160rpx;
  border-bottom: 1px solid #f0f0f0;
  /* flex:0 0 auto; */
}

.header-row {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: rgb(247, 248, 250);
}

.header-row>view {
  background-color: rgb(247, 248, 250);
  color: #8c8c8c;
}

.fixed-cell {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  background-color: white;
  z-index: 10;
  min-width: 220rpx;
  max-width: 220rpx;
  padding: 40rpx 24rpx;
  box-shadow: 2px 0px 2px #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.empty {
  position: absolute;
  left: 0rpx;
  top: 0;
  padding: 24rpx;
  background-color: rgb(247, 248, 250);
  z-index: 100;
  min-width: 220rpx;
  max-width: 220rpx;
  font-size: 24rpx;
  color: #8c8c8c;
}
.header-row .cell {
  flex: 1;
  padding: 24rpx;
  min-width: 160rpx;
  max-width: 160rpx;
  font-size: 24rpx;
  /* flex:0 0 auto; */
}
.cell-wrap {
  width: 3804rpx;
  font-size: 26rpx;
}

Answer 1

参考结合GPT4.0、文心一言，如有帮助，恭请采纳。

1、从你的代码来看，在微信小程序中，使用 scroll-view 组件时，如果需要固定表头和左侧，通常会遇到滚动抖动的问题。这是因为 scroll-view 组件在滚动时，会默认地移动所有的子元素。为了解决这个问题，可以使用 CSS 的 transform 属性来实现固定表头和左侧的效果。
下面是一个示例代码，演示如何使用 transform 属性来解决滚动抖动问题：
#html

<!-- fixed-table.wxml -->  
<view class="table-container">  
  <view class="empty">  
    我是空白  
  </view>  
  <!-- 表格主体部分 -->  
  <scroll-view enhanced="{{true}}" show-scrollbar="{{false}}" class="table-scroll" scroll-x="{{true}}" scroll-y="{{true}}" bindscroll="onScroll">  
    <view class="cell-wrap">  
      <!-- 左侧固定 -->  
      <view class="fixed-cell" style="width: {{fixedWidth}}px;">  
        <!-- 左侧内容 -->  
      </view>  
      <!-- 表头部分 -->  
      <view class="header-row">  
        <!-- 表头内容 -->  
      </view>  
      <!-- 表格内容区 -->  
      <view class="content">  
        <!-- 行内容 -->  
      </view>  
    </view>  
  </scroll-view>  
</view>

#css

/* fixed-table.wxss */  
.table-container {  
  display: flex;  
  flex-direction: column;  
}  
  
.table-scroll {  
  overflow: auto;  
}  
  
.cell-wrap {  
  display: flex;  
  flex-direction: row;  
}  
  
.fixed-cell {  
  position: absolute;  
  width: {{fixedWidth}}px; /* 固定列的宽度 */  
}  
  
.header-row {  
  position: sticky;  
  top: 0;  
  background-color: #f0f0f0; /* 表头背景色 */  
}