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

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

1. 问题背景

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

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

2. 解决思路

1. 我看了一下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. 优化思路

1. 编写一个通用的 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
   

2. 在 wxml 文件引入：

3. 监听scroll-view的滚动事件改为 bindscroll="{{ table.scrollMove }}"

4. 设置固定列的内容容器id为 id="fixed-content-wrap"

那么这样就完成了一个需求：table表头和列固定