使用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;
}
参考结合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; /* 表头背景色 */
}
该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索并已验证可行,得到内容具体如下：
滚动时出现抖动问题可能是由于滚动过程中的重绘和回流引起的。为了解决这个问题，您可以尝试以下几种方法：
1、 使用will-change属性：在表头和左侧的样式中添加will-change: transform;属性，这会提示浏览器对这些元素进行优化处理。
.header-row {
will-change: transform;
/* 其他样式... */
}
.fixed-cell {
will-change: transform;
/* 其他样式... */
}
2、 优化重绘和回流：减少滚动过程中的重绘和回流次数，可以尝试以下优化方式：
transform属性来实现动画和变换，而不是直接操作top、left等属性。position: sticky元素，尽量减少这些元素的数量。3、 使用requestAnimationFrame：将滚动事件的处理函数包装在requestAnimationFrame中，可以将更新操作推迟到下一次浏览器渲染帧，以提高性能和平滑度。
onScroll(event) {
requestAnimationFrame(() => {
// 更新操作代码...
});
}
尝试以上方法后，您可以观察滚动时是否还存在抖动问题。
希望这些提示对您有所帮助。
如果以上回答对您有所帮助，点击一下采纳该答案～谢谢
是不是刷新重新渲染太多了
参考gpt：
结合自己分析给你如下建议：
一个可能的原因是，你使用了 position: sticky 这个属性，但是在 iOS 端，这个属性有一个已知的 bug ，就是在滚动时会出现抖动或闪烁的现象。这个 bug 是由于 iOS 的渲染机制导致的，目前没有官方的修复方案。
一个可能的解决办法是，使用其他的方式来实现表头和左侧的固定效果，比如使用 fixed 定位或者 transform 属性。这样可以避免使用 sticky 属性，从而避免抖动的问题。
另一个可能的解决办法是，使用一些第三方的库或插件来实现表格组件，比如 taro-table-component4或者 taro-sticky-table。这些库或插件已经封装了表格的功能和样式，可以方便地使用和定制。
使用 transform 来解决抖动问题
.header-row {
transform: translate3d(0, 0, 0);
}
.fixed-cell {
transform: translate3d(0, 0, 0);
}