|
这个场景一般用于展示数据时，数据过多，每条一行显示不下，表头可以横向滑动，下面要显示的数据部分横向纵向都可以滑动。表头或下面数据部分横向滑动的时候，两部分可以进行联动
具体效果像这样（随便写的丑样式布局）
说说原理，主要是使用两个scroll-view组件，然后监听两个scroll-view的滑动事件，然后根据滑动的scroll-view横向滑动的距离，通过scroll-left来设置另一个scroll-view滑动的距离
首先WXML代码：
-
<scroll-view style='width:100%;height:100rpx;border:1px solid #f00;' scroll-x scroll-left='{{title_x}}' bindscroll='titlebindscroll' bindtouchstart='bindtouchstart' data-types='title'>
-
<view style='height:300rpx;background:#00f;width:1000rpx;margin-bottom:10rpx;float:left;color:#fff;'>12122665566546546546512346846546465465466666666666666666666666644444444444488888888888888888888999999999999999995555555555555553333333333333333222222222222222777777777776666666666666666666666555555555555533333333332222222</view>
-
-
</scroll-view>
-
<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'>
-
<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>
-
-
</scroll-view>
然后JS代码：
-
let ifs=true;//这里添加一个开关，因为在设置一个scroll的滑动距离的时候会触发这个scroll的滑动事件，从而执行里面的事件，这样会做很多多余的操作，影响性能
-
Page({
-
data: {
-
title_x:0
-
},
-
//在开发者工具上前几次滑动会很慢，估计几秒后另一个才会滑动，手机上不会，在手机和开发者工具上滑动的时候有大概几百毫秒延迟，可以忽略不计，我觉得是因为两个地方的滑动都要频繁的使用setData操作，所以会出现这些情况，如果大家发现是其他原因引起的、有错误或有其他好的方法，请留言，谢谢
-
//判断是那个部分在滑动
-
bindtouchstart(e){
-
const types=e.currentTarget.dataset.types;
-
ifs=(types=='title');//
-
console.log(ifs);
-
},
-
//下面红色部分滑动
-
bindscroll(e){
-
let move = e.detail.scrollLeft,//获取下面红色部分的横向滑动距离
-
title_x=this.data.title_x;
-
if (title_x!=move&&!ifs){//监听srcoll滑动事件，判断下面红色部分与左边的距离和蓝色部分与左边的距离是否相等，相等的话就是纵向滑动，否则就是横向滑动，只有横向滑动的时候才改变蓝色部分滑动的距离
-
this.setData({//这里需要实时渲染
-
title_x: move
-
});
-
}
-
-
},
-
//蓝色部分滑动
-
titlebindscroll(e){
-
const move = e.detail.scrollLeft;//获取蓝色部分滑动的距离
-
if(ifs){
-
this.setData({//更新下面红色距离左边的距离，这里是滑动蓝色部分然后设置下面滑动的距离，所以要用setData进行渲染
-
title_x:move
-
});
-
}
-
},
-
onLoad: function (options) {
-
-
}
-
-
})
在开发者工具上前几次滑动会很慢，估计几秒后另一个才会滑动，手机上不会。 在手机和开发者工具上滑动的时候有大概几百毫秒延迟，可以忽略不计， 我觉得是因为两个地方的滑动都要频繁的使用setData操作，所以会出现这些情况。 如果大家发现是其他原因引起的、有错误或有其他好的方法，请留言，谢谢
|
