Small procedures similar to the table fixed head fixed left column, the content can scroll, table head synchronous movement, column fixed

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!