How does WeChat Mini Programs realize two scroll-view Synchronize scrolls

problem description

clipboard.png
as shown in the picture, the upper conference room is a scroll-view, and the table below is also scroll-view,. So how to achieve the linkage of the two scroll-view? when the upper conference room bar scrolls 20rpx to the right, the table below also scrolls 20rpx. I wanted to combine the two into one, but it didn"t work because the form had to scroll up and down, and when I scrolled up, the conference room bar couldn"t keep from scrolling up.


clipboard.png

according to the official component properties, you can set the value of scroll-left, which is easy. All you have to do is listen to the scrolling event, calculate the scrolling distance, and then set the corresponding data

.

ask whether the problem of the landlord has been solved


have you solved it? try it according to the plan on the first floor. If there is no Synchronize, there will be a delay


scroll-view in wxml defines a scroll-left= "{scroll_left}" bindscroll= "scroll"

Trigger this

in

js

scroll: function(e) {
    this.setData({
      scroll_left: e.detail.scrollLeft
    })
  },
Menu