如何通过JS去控制小程序的【频繁】视图更新
1. 问题背景
最近我司要在小程序上面开发一个表格,与elementUI
的表格一致,
- 表头固定,跟随滚动条X轴去滚动
- 左侧第一栏固定,跟随滚动条Y轴去滚动
演示链接:element表格演示
2. 解决思路
-
我看了一下element的官网,发现是一个普通的表格,在上面带上一个fixed的固定列表格,所以我在小程序里面就如下:
1)普通表格正常渲染,父节点为一个scroll-view
,设置可以横向滑动,那么就实现了X轴滑动
2)然后左侧弄一个固定列,设置为 absolute,那么就实现了一个固定列<!-- fixed表格 --> <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
-
在 wxml 文件引入:
<wxs module="table" src="../tableMove.wxs"></wxs>
-
监听
scroll-view
的滚动事件改为bindscroll="{{ table.scrollMove }}"
-
设置固定列的内容容器id为
id="fixed-content-wrap"
那么这样就完成了一个需求:table表头和列固定