网站建设知识

方案传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

主页>SEO>网站优化

聊一聊微信小程序实现顶部,底部滑动联动?

来源:网站建设 | 2021-03-16 10:08:20

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

说说原理,主要是使用两个scroll-view组件,然后监听两个scroll-view的滑动事件,然后根据滑动的scroll-view横向滑动的距离,通过scroll-left来设置另一个scroll-view滑动的距离

首先WXML代码:

<scroll-view scroll-x scroll-left='{{title_x}}' bindscroll='titlebindscroll' bindtouchstart='bindtouchstart' data-types='title'>
<view></view>
</scroll-view>
<scroll-view scroll-x scroll-yscroll-left='{{title_x}}' bindscroll='bindscroll' bindtouchstart='bindtouchstart' data-types='data'>
<view wx:for='{{[1,1,1,11,1,1,1,1,1,11,1,1,1]}}'></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操作,所以会出现这些情况。
 

做网站 选禅诺网

多一份参考,总有益处

联系我们,获取专属《建站方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:13710717775 / 微信咨询 + :13710717775