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

最近公司要开发小程序，其中有一个功能，需要左边的导航栏和右边的内容对应联动，其实就想饿了么外卖的选单界面，但是在小程序里实现又有点不同了。

最终效果如图

右边内容容器是可以滚动的，可以使用小程序提供的scroll-view组件，要强调的是，必须给节点设置高度

scroll-into-view就是内容栏的一个钩子,通过控制contentActive的值来控制内容栏的显示。

滚动的问题好解决，那么联动呢？我们需要的联动必须是左右相互的，即点击导航栏，内容会跟着滚动到对应的位置，滑动内容区域，导航栏也会有对应的动作，比如高亮。

小程序的组件属性中有一个scroll-into-view的属性

这其实就是一个锚点，给内容块分别不同的id，那么动态改变id值就可以让对应的内容滑到可视区了。这个属性可以满足导航栏联动内容区域的功能。

数据：

data: {
        typeData: [],
        contentActive: '', // 内容栏选中id
        navActive: '', // 导航栏选中id
        heightArr: [],
        containerH: 0
    }

渲染的时候就要提前把内容栏 各模块的id（加上tty是因为小程序不允许id以数字开头）绑定在对应的导航栏上,索引页绑上去，用于给选中状态标示

而内容渲染的时候页用type数据，并且id和导航栏的自定义id一致

点击导航栏时就可以通过小程序的方法拿到id和该项目的索引，并赋值

chooseType(e) {
      let id = e.currentTarget.dataset.id;
      let index = e.currentTarget.dataset.index;
      this.setData({
        contentActive: id,
        navActive: index
      })
      // console.log(id)
    }

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

这里有个注意点需要说一下，控制导航栏active的参数和内容栏active的参数不能是同一个，不然会冲突，主要是后面内容栏联动导航栏时的bug，所以这里分开控制。

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

这里scroll-view提供了一个bindscroll事件

可以看到，返回的值有scrollTop，代表滚动的距离，那么就可以利用这个数据做做文章了。

思路：要想联动，就需要知道内容滚动的区域，具体是属于哪个大类的范围距离里，然后据此改变导航栏的active值。要知道滚动区域，就需要计算每个内容模块的高度，并累加。在滚动的时候监听滚动距离，与高度的累加值进行比较，得出此时正在哪个大类的区域。

渲染完成时获取模块高度，并进行数据处理，形成新的数组

当scroll-view滚动的时候，就可以获取到滚动的距离，并动态计算滚动区间，是在heightArr的哪个区间里面，并返回对应的索引

这样就实现了联动效果