如何通过JS去控制小程序的【频繁】视图更新？ -- table表头和列固定 -- wxs响应事件

本文链接：https://blog.youkuaiyun.com/pig_is_duck/article/details/121876653

本文探讨了如何在微信小程序中实现类似elementUI的固定表头和列的表格，通过监听scroll-view滚动事件并利用wxs优化渲染性能，避免了setData的频繁调用，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何通过JS去控制小程序的【频繁】视图更新

1. 问题背景

最近我司要在小程序上面开发一个表格，与elementUI的表格一致，

表头固定，跟随滚动条X轴去滚动
左侧第一栏固定，跟随滚动条Y轴去滚动
演示链接：element表格演示

2. 解决思路

我看了一下element的官网，发现是一个普通的表格，在上面带上一个fixed的固定列表格，所以我在小程序里面就如下：

1）普通表格正常渲染，父节点为一个 scroll-view，设置可以横向滑动，那么就实现了X轴滑动
2）然后左侧弄一个固定列，设置为 absolute，那么就实现了一个固定列
```
	
    <view class="table-fixed">
      <view class="title-wrap">
        <view class="title">品规名</view>
      </view>
      <view class="content-scroll">
        <view  class="content-wrap" >
          <view class="report-item wx:for="{{reportList}}" wx:key="goods_name" >
            <view class="col three-line">{{item.goods_name}}</view>
          </view>
        </view>
      </view>
    </view>
```
```
/* fixed表格 */
.report .table-fixed {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 140rpx;
  z-index: 1;
  box-shadow: 6px 0 6px -4px rgba(0,0,0,.2);
  background-color: #f5f5f5;
}
.report .table-fixed .content-scroll {
  height: calc(100% - 86rpx);
  overflow: hidden;
}
```
3）然后监听普通表格 的滚动事件，去获取滚动位置，然后通过这滚动位置去设置固定列的 scrollTop，但是这里有个问题，正常来说：

1通过监听 scroll-view的滚动事件，去修改样式，只能通过 setData去修改值，然后在视图上设置对应属性的style：top值，但是这样会导致：逻辑层和渲染层的通信以及一次渲染，通信的耗时比较大。此外 setData 渲染也会阻塞其它脚本执行，导致了整个用户交互的动画过程会有延迟。

所以我查阅了微信小程序的文档，找到一个相对来说比较好的方案：
文档链接：微信小程序文档 - wxs响应事件

3. 优化思路

编写一个通用的 wxs文件，名字叫：tableMove.wxs

var wxs = {
  // 页面表格滚动
  scrollMove: function(event, ownerInstance) {
    var scrollY = event.detail.scrollTop
    var instance = ownerInstance.selectComponent('#fixed-content-wrap') // 返回组件的实例
    instance.setStyle({
      // 使用translateY比使用top效率更好
      "transform": "translateY(-" + scrollY + "px" 
    })
  }
}

module.exports = wxs