說說原理，主要是使用兩個scroll-view組件，然后監聽兩個scroll-view的滑動事件，然后根據滑動的scroll-view橫向滑動的距離，通過scroll-left來設置另一個scroll-view滑動的距離

首先WXML代碼：

1. <scroll-view style='width:100%;height:100rpx;border:1px solid #f00;' scroll-x scroll-left='{{title_x}}' bindscroll='titlebindscroll' bindtouchstart='bindtouchstart' data-types='title'>
2. <view style='height:300rpx;background:#00f;width:1000rpx;margin-bottom:10rpx;float:left;color:#fff;'>12122665566546546546512346846546465465466666666666666666666666644444444444488888888888888888888999999999999999995555555555555553333333333333333222222222222222777777777776666666666666666666666555555555555533333333332222222</view>
3.  
4. </scroll-view>
5. <scroll-view style='width:100%;height:1000rpx;border:1px solid #f00;' scroll-x scroll-yscroll-left='{{title_x}}' bindscroll='bindscroll' bindtouchstart='bindtouchstart' data-types='data'>
6. <view style='height:300rpx;background:#f00;width:1000rpx;margin-bottom:10rpx;float:left;' wx:for='{{[1,1,1,11,1,1,1,1,1,11,1,1,1]}}'>12122665566546546546512346846546465465466666666666666666666666644444444444488888888888888888888999999999999999995555555555555553333333333333333222222222222222777777777776666666666666666666666555555555555533333333332222222</view>
7.  
8. </scroll-view>

然后JS代碼：

1. let ifs=true;//這里添加一個開關，因為在設置一個scroll的滑動距離的時候會觸發這個scroll的滑動事件，從而執行里面的事件，這樣會做很多多余的操作，影響性能
2. Page({
3. data: {
4. title_x:0
5. },
6. //在開發者工具上前幾次滑動會很慢，估計幾秒后另一個才會滑動，手機上不會，在手機和開發者工具上滑動的時候有大概幾百毫秒延遲，可以忽略不計，我覺得是因為兩個地方的滑動都要頻繁的使用setData操作，所以會出現這些情況，如果大家發現是其他原因引起的、有錯誤或有其他好的方法，請留言，謝謝
7. //判斷是那個部分在滑動
8. bindtouchstart(e){
9. const types=e.currentTarget.dataset.types;
10. ifs=(types=='title');//
11. console.log(ifs);
12. },
13. //下面紅色部分滑動
14. bindscroll(e){
15. let move = e.detail.scrollLeft,//獲取下面紅色部分的橫向滑動距離
16. title_x=this.data.title_x;
17. if (title_x!=move&&!ifs){//監聽srcoll滑動事件，判斷下面紅色部分與左邊的距離和藍色部分與左邊的距離是否相等，相等的話就是縱向滑動，否則就是橫向滑動，只有橫向滑動的時候才改變藍色部分滑動的距離
18. this.setData({//這里需要實時渲染
19. title_x: move
20. });
21. }
22.  
23. },
24. //藍色部分滑動
25. titlebindscroll(e){
26. const move = e.detail.scrollLeft;//獲取藍色部分滑動的距離
27. if(ifs){
28. this.setData({//更新下面紅色距離左邊的距離，這里是滑動藍色部分然后設置下面滑動的距離，所以要用setData進行渲染
29. title_x:move
30. });
31. }
32. },
33. onLoad: function (options) {
34.  
35. }
36.  
37. })

在開發者工具上前幾次滑動會很慢，估計幾秒后另一個才會滑動，手機上不會。  在手機和開發者工具上滑動的時候有大概幾百毫秒延遲，可以忽略不計，  我覺得是因為兩個地方的滑動都要頻繁的使用setData操作，所以會出現這些情況。  如果大家發現是其他原因引起的、有錯誤或有其他好的方法，請留言，謝謝