小程序实现类似表格固定头部固定左边第一列,内容可以滚动,表头同步动,列fixed

固定头和列

小程序遇到要实现表格内容,可是小程序没有自带的表格UI,如何下手?
实现表格:思路是view的遍历,行列双层遍历wx:for
要实现表头和第一列一直展示在页面,主体可以滚动。
实现:

先实现表头和内容。在最外层假设class=box的元素外面套一个scroll-view 重点,属性给予scroll-x为true,y不赋值 标题内容之后的class=content,再用一层scroll-view套住主体,属性给予scroll-y为true,x不赋值 还有重要的一步,.box后面的表头和.content的width要赋值,等于每一格的宽度td*arr.length(arr是遍历项) .box给一个overflow:hidden 第一个滚动实现了,无缝无延迟 左边的第一列,采用position:absolute;left:0的绝对定位 top的具体位置用小程序获取元素的方法wx.createSelectorQuery().select('#xxx').boundingClientRect,定到具体位置 当往下滑动.content主体的时候,给内容的scroll-view绑定一个bindscroll事件 拿到scrolltop的值赋给左边列的top值,就可以实现我们的最终目的!