固定头和列
小程序遇到要实现表格内容,可是小程序没有自带的表格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值,就可以实现我们的最终目的!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。