小程序滚动组件，左边导航栏与右边内容联动效果实现

效果如下：

  
    {{item.typeName}}
    
    {{item.num}}
  

一 ：点击分类内容区域对应滚动

动态绑定navActive的值，来决定哪个分类被选中，选中类则为active,否则为空，将选中样式写到active里。
然后为点左边右边跳到相应商品，这里主要用到的锚点，小程序在scroll-view里提供了一个scroll-into-view

  
    
      {{item.typeName}}
      
        
          
        
        
          
            {{goods.goods_name}}
            仅剩{{goods.left_num}}份
          
          
            ...
          
        
      
     
     
  
    暂无商品
  

scroll-into-view就是内容栏的一个钩子,通过控制contentActive的值来控制内容栏的显示。
滚动的问题好解决，那么联动呢？我们需要的联动必须是左右相互的，即点击导航栏，内容会跟着滚动到对应的位置，滑动内容区域，导航栏也会有对应的动作，比如高亮。
小程序的组件属性中有一个scroll-into-view的属性

//点击导航栏时就可以通过小程序的方法拿到id和该项目的索引，并赋值
chooseType:function(e){ //分类选择
    // console.log(e)
    let dataSet = e.currentTarget.dataset;
    this.setData({
      navActive: dataSet.index,
      contentActive:dataSet.id,
    })
  },

这样通过点击导航栏，内容也会自动滚动到指定位置了，并且导航栏对应的标题高亮效果

二：反过来，右边联动左边就比较麻烦了，小程序没有提供反向联动的功能，只能自己实现了。**

这里的绑定的高度是scroll-view的高度，因为我这里有240的head和150的foot，所以才减-240-150，请根据实际情况决定写法
wx.getSystemInfo({
  success: function (res) {
    let windowHeight = (res.windowHeight * (750 / res.windowWidth)); //将高度乘以换算后的该设备的rpx与px的比例
    //console.log(windowHeight) //最后获得转化后得rpx单位的窗口高度
    _this.setData({
      conHeight: windowHeight-240-150,
    })
  }
})

获得每个元素据顶部的高度，组成一个数组，通过高度与scrollTop的对比来知道目前滑动到那个区域
let heightArr = [];
let h = 0;
//创建节点选择器
const query = wx.createSelectorQuery();
//选择id
query.selectAll('.contlist').boundingClientRect()
query.exec(function (res) {
  //res就是 所有标签为contlist的元素的信息 的数组
  res[0].forEach((item) => {
    h += item.height;
    heightArr.push(h);
  })
  _this.setData({
    heightArr: heightArr
  })
  // console.log(heightArr)
})

1.当scroll-view滚动的时候，就可以获取到滚动的距离，并动态计算滚动区间，是在heightArr的哪个区间里面，并返回对应的索引。
2.因为是通过实时监控来判断的，如果判断完了以后就绑定数据的话，就会不停的setData,所以我这里设置了一个lastActive,只有每次被选中分类变的时候，才会setData

onScroll:function(e){
    const scrollTop = e.detail.scrollTop;
    const scorllArr = this.data.heightArr;
    const _this = this;
    if (scrollTop >= scorllArr[scorllArr.length - 1 ] - (_this.data.conHeight/2)){
      return;
    }else{
      for(let i=0;i< scorllArr.length; i++){
        if(scrollTop >= 0 && scrollTop =scorllArr[i-1] && scrollTop 

参考

https://blog.csdn.net/dongguan_123/article/details/80598107
https://blog.csdn.net/weixin_42488377/article/details/81162676