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

• 效果
  左侧为年份，右侧为该年对应的月份，点击左侧2020年，则右侧的2020年灰色区域的标题滚动到最顶部；滚动右侧区域当2020年滚动到顶部时，左侧选中2020年高亮显示。
  

• 思路
  左侧点击年份，右侧滚动到对应年的月份。使用scroll-view组件分别包裹左侧及右侧内容，点击左侧年份时，给其动态设置样式并让右侧区域滚动到指定位置；
  给左侧每一年设置自定义属性data-id='item{ {index}}'，给右侧的scroll-view标签设置属性scroll-into-view="{ {selectId}}"以实现滚动，selectId就是id值。当点击左侧年份时需要给currentLeft左侧选中年份设置选中样式，还要将选中年份的id赋值给selectId。
  

  右侧滚动到某一年的月份时，左侧对应显示高亮选中。右侧的scroll-view组件绑定bindscroll="onScroll"，用来检测滚动时距离顶部的高度值。
  
  当首次进入月历页，默认选中携带的年份及月份并滚动到对应的位置。首先将默认值的年份转成字符串，查找该年份所在对象在月历数组中的索引，此索引即左侧年份选中的的索引值；右侧的滚动及选中需要计算右侧每个分类的高度组成一个数组heightArr，需要给scroll-top="{ {scrollVal}}"
  赋值为"scrollVal": heightArr[_this.data.currindex - 1]，当选中为2020年时，索引值为1，此时需要右侧滚动到heightArr[0]2021年的底部也就是2020年的顶部。
  

• 存在问题
  
  在开发者工具上没有问题，获取的距离都为整数
  
  在不同的手机上获取的高度存在不同位数的小数点，导致滚动的高度加上页面的高度小于所有元素的全部高度。无法在右侧月份滚动到最下面的时候选中左侧最后一项。解决方法是将滚动的高度和页面高度再加1，大于元素总高度此时左侧最后一项选中。
  

• 具体代码

  <!--pages/monthOfficeModule/monCalendar/monCalendar.wxml-->
  <view class='cont-pro'>
    <!-- 左侧列表 -->
    <view class='pro-left font28 color9'>
      <scroll-view class='swipter-nav' scroll-y="true" style="height:100%;">
        <view wx:for="{
        {serviceTypes}}" wx:key="index" class='pro-title {
        {index==currentLeft?"bgWhite":""}}' data-id='item{
        {index}}' bindtap='proItemTap' data-pos='{
        {index}}'>{
      {item.type}}</view>
      </scroll-view>
    </view>
    <!-- 右侧列表 -->
    <view class="content">
      <scroll-view class='pro-right' scroll-y="true" scroll-with-animation="true" scroll-into-view="{
        {selectId}}" bindscroll="onScroll" style="height:{
          {
          winHeight}}px;" scroll-top="{
        {scrollVal}}">
        <!-- id要用来实现点击左侧右侧滚动至相应位置的效果；class（pro-box）要用来计算右侧对应左侧某一分类的高度  -->
        <!-- id: item0, item1, item2... （注意：不能直接使用数字或汉字做id）-->
        <view>
          <view class='pro-box' wx:for="{
        {serviceTypes}}" wx:key="index" wx:for-index="index" wx:for-item="item" id="item{
        {index}}">
            {
      {item.index}}
            <view class="item-title">{
      {item.type}}</view>
            <view class='pro-item {
        { item.id == perMonId ? "activeSelect" : "" }}' wx:for="{