欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序实现顶部、底部滑动联动

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:500

微信小程序实现顶部、底部滑动联动

发布时间:2020-10-30  

这个场景一般用于展示数据时,数据过多,每条一行显示不下,表头可以横向滑动,下面要显示的数据部分横向纵向都可以滑动。表头或下面数据部分横向滑动的时候,两部分可以进行联动

具体效果像这样(随便写的丑样式布局)

微信小程序实现顶部、底部滑动联动

说说原理,主要是使用两个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操作,所以会出现这些情况。  如果大家发现是其他原因引起的、有错误或有其他好的方法,请留言,谢谢