The reason
Yesterday I tested a bug in my little program and said, ‘How can I slide the list that pops up after me and the list that comes after me will slide along with it? It’s very fast.’ I said, ‘I’ll fix it.’
The scenario that caused the problem
Is a data list page that loads data by sliding from the bottom up
So I added a min-height ‘100vh’ to the outermost view of the page to make the list automatically increase in height
The list page has a lot of filters or filters. I made a pop-up component with a background mask layer and stuck the filters in. The outermost view gives max-height: 85vh; Overflow: scroll; Let it also slide to select a filter when there is a lot of data
Notice the problem: If both the filter component and the data list are too large for the above 85vh and 100vh then the touchMove event will be triggered on both lists at the same time if the upper list is hit bottom or top, if the lower list is not hit bottom or top, The underlying touchMove event will be triggered, and the background will slide, that is, the cliche of sliding through, now that we find the cause of the problem, now we start to solve it 🔨
Is Baidu dafa good?
The small program end
Catchtouchmove =’true’ for the underlying list, so you can’t slide it into the scroll-view and set the scroll-y=’true’ for the underlying list. But the scroll view performance will be discounted when there is a lot of list data, this is not to talk about, according to my attempt, this way does not work, maybe my posture is wrong, anyone who has solved it can discuss, welcome to leave a message ~~
Web side
It is recommended to use tua-body-scroll lock to solve this problem perfectly.
Sacrifice my great weapon
We can listen on the bottom page to see if the top list is displayed. When the top list is displayed, give the bottom view a overflow: hidden; Hight: 100vh style. Disable this style when the upper layer is hidden
Warsong up ~
★,°:.☆(￣▽￣)/$:.°★. Test little sister have said good (have not given) ~→