评论

究极干货,完美实现商品左右联动scroll-view的实现及性能优化,点击左边,右边滚动;右边滚动,左边也对应变化

左右联动,点击左边右边滚动,滑动右边左边滚动及改变状态


如上图,在小程序中,我们经常需要一个功能,就是点击左边的列表选项,右边对应的内容滚动,而滑动右边的内容,左边对应的改变状态及位置,特别是商城站基本都涉及到,那么我们该怎么实现呢,这里我们就需要用到小程序的scroll-view这个组件;

先看代码

第一步,点击左边右边会对应滚动:

这个比较简单,利用scroll-view的属性scroll-into-view="",当我们点击左侧列表子项时,就把子项的id赋值给croll-into-view,就可以实现点击左侧,右侧滚动了,

第二步,滑动右侧,左侧高亮且滚动到可见区域:

这个才是左右联动的核心所在:那该怎么实现呢,思路是:scroll-view 有监听事件bindscroll,我们在监听事件里监听右侧内容滚动的高度,进而判断当前是属于那一块区域。在bindscroll事件里我们可以直接得到scrollTop当前滚动的高度,但是我怎么判断这个高度输入第几类商品呢,这个就需要得到右侧每一类商品的高度,然而每一类商品的高度不是写死的,由数据渲染的,有的数据多一点,高度就多一点,那该怎么获取呢,这个就需要我们用到小程序的另一个api  wx.createSelectorQuery(),

获取右侧商品分类的高度代码:

var that=this;

var h=0;

var heightArr=[];

wx.createSelectorQuery().selectAll('.sc_right_item').boundingClientRect(function (rect) {//selectAll会选择所要含有该类名的盒子

}).exec(function (res) {

res[0].forEach((item)=>{

h+=item.height;

heightArr.push(h);

})

that.setData({heightArr:heightArr})

});

这样我们就得到右侧商品的分类的高度了,如上面获得的高度heightArr是一个数组,heightArr[0]就是第一类商品的高度(我这里是菜品1的高度),而heightArr[1]就是第二类商品的高度加上第一类商品的高度,以此类推;这里获取的高度单位为px;正好和scrollTop的单位也是px;所以我们不需要在rpx和px之间进行换算;

然后右边滑动,左边对应高亮及滚动代码:


上面代码我们何以看到:左侧的active状态通过cp_index=i来实现,而左侧滚动的位置由leftTop=i*左侧子项的高度来实现(左侧子项的高度用wx.createSelectorQuery()来获取,不能是写死的,因为scroll-top="{{leftTop}}" 的值是px,所有需要获取,不然用写死的rpx,就要每个手机都要进行换算)

性能优化代码:

想想看,我们右边每滑动一下,Scroll-view 的监听就执行了好多下(比如次数为n),在加上每次执行的过程中又执行for循环(比如次数为m),那么我们每滑动一下就必须setData的次数=n*m;性能可想而知,肯定会卡顿,那么怎么避免了,我们只需要在特定范围内执行一次,比如在0-500的高度内执行一次,那么我们就得另加判断,如下图

第一类商品: 一 开始,我设oneShow=true,当它执行一次的时候就赋值为false,所以在第一类商品高度区域内只执行一次,如果到达第二类以上,就让oneShow=true回来,这样回滚的时候它又能执行;

第二类商品以上: 初始值zindex=0;如果不等于当前i值就让它执行,然后让它=i;第二次及而二次以上就不再执行,当它=i+1时又执行一次,然后在这个阶段就不再执行,以此类推

代码片段 https://developers.weixin.qq.com/s/t7uVgOmT7gae

最后一次编辑于  08-23  
点赞 4
收藏
评论

4 个评论

  • 珱㻏
    珱㻏
    09-20

    请教下,如果用这种方式,滚动稍快的话,选中左侧的分类,会有一跳一跳的效果,体验不是很好。楼主是否还有其它的优化方案?

    09-20
    赞同
    回复 1
  • 祁冲锋
    祁冲锋
    09-11

    确实不错

    09-11
    赞同
    回复
  • 戏语花
    戏语花
    08-30

    你这个并没有做到真正的节流吧,你的bindscroll里面的循环还是执行了

    08-30
    赞同
    回复
  • 二月
    二月
    08-22

    可以看下这个

    https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

    08-22
    赞同
    回复 2
    • 御风前行
      御风前行
      08-22
      怎么了
      08-22
      回复
    • 调查员
      调查员
      08-23
      官方提供了解决方案呗
      08-23
      回复