Fixed heads and columns
Small program to achieve the content of the table, but the small program does not have its own form UI, how to start? WX: For the table header and the first column are always displayed on the page, and the body can scroll. Implementation:
- Implement the header and content first. In the outermost layer, let’s say we have a scroll view around the class=box element
- The key thing is, the property gives scroll-x true, and no y
- Class =content after the content of the title, and then a layer of scroll-view around the body, attributes that give scroll-y true, and no value for x
- The next important step is to assign the.box header and the content width to be equal to the width of each cell TD *arr.length (arr is the traversal item).
- .box gives an overflow: hidden
- The first scrolling is achieved, seamlessly and without delay
- For the first column on the left, use position: absolute; Left: The absolute positioning of 0
- Wx. createSelectorQuery(). Select (‘# XXX ‘). BoundingClientRect to specify the location of the element
- Bind a bindScroll event to the scroll view of the content as it slides down the.content body
- Get the value of scrollTop and assign it to the top of the left column, and we’ll do what we want to do!