微信小程序scroll-view实现左右联动效果

<view class="container">  <view class="category-left">    <scroll-view scroll-y="true" style="height:100%">      <block wx:for="{{category}}" wx:key="id">       <view class="catgegory-item {{activeId === item.id?'active-item':''}}" data-id="{{item.id}}" bindtap="clickItem">{{item.name}}</view>      </block>    </scroll-view>  </view>  <view class="category-right">    <scroll-view scroll-y="true" style="height:100%" scroll-into-view="{{toView}}" scroll-with-animation="ture" bindscroll="scroll">      <view class="categoty-detail">      <block wx:for="{{content}}" wx:key="id">        <view class="catefory-main">          <view class="category-title" id="{{item.id}}">{{item.title}}</view>          <view class="category-content">              <view class="content-item" wx:for="{{item.options}}" wx:for-item="i" wx:key="id">                <image src="{{i.src}}"></image>                <text>{{i.text}}</text>                                                                    </view>          </view>        </view>       </block>      </view>    </scroll-view>  </view></view>

//index.js//获取应用实例const app = getApp()Page({  data: {    toView: 'a1',    activeId: 'a1',    category: [      {name: '新品', id: 'a1'},      { name: '众筹', id: 'a2' },      { name: '小米手机', id: 'a3' },      { name: 'redmi手机', id: 'a4' },      { name: '黑鲨游戏', id: 'a5' },      { name: "手机配件", id: 'a6' },      { name: '电视', id: 'a7'},      { name: '电脑', id: 'a8' },    ],    content: [      {        title: '- 新品 -',         options: [          { src: '../../image/redmi.png',id: '001',text: 'redmi8'},          { src: '../../image/redmi.png', id: '002', text: 'redmi8A' },          { src: '../../image/redmi.png', id: '003', text: '小米9pro 5G'},          { src: '../../image/redmi.png', id: '004', text: 'redmi8'},          { src: '../../image/redmi.png', id: '005',text: 'redmi8' }        ],        id: 'a1'      },      {        title: '- 众筹 -',        options: [          { src: '../../image/zhongchou.png', id: '006', text: 'redmi8' },          { src: '../../image/zhongchou.png', id: '007' ,text: 'redmi8'},          { src: '../../image/zhongchou.png', id: '008', text: 'redmi8' },          { src: '../../image/zhongchou.png', id: '009',text: 'redmi8' }        ],        id: 'a2'      },      {        title: '- 小米手机 -',        options: [          { src: '../../image/xiaomi.png', id: '006', text: 'redmi8' },          { src: '../../image/xiaomi.png', id: '007', text: 'redmi8' },          { src: '../../image/xiaomi.png', id: '008', text: 'redmi8' },          { src: '../../image/xiaomi.png', id: '009', text: 'redmi8' }        ],         id: 'a3'      },      {        title: '- redmi手机 -',        options: [          { src: '../../image/hongmi.png', id: '006', text: 'redmi8' },          { src: '../../image/hongmi.png', id: '007', text: 'redmi8' },          { src: '../../image/hongmi.png', id: '008', text: 'redmi8' },          { src: '../../image/hongmi.png', id: '009', text: 'redmi8' }        ],        id: 'a4'      }    ],  },  //事件处理函数  onLoad: function () {    this.setData({      toView: 'a1',      heightArr: []    })    let query = wx.createSelectorQuery();    query.selectAll('.catefory-main').boundingClientRect((rect)=> {      rect.forEach(ele => {        this.calculateHeight(ele.height);      })    }).exec();  },  clickItem(e) {    this.setData({      activeId: e.currentTarget.dataset.id,      toView: e.currentTarget.dataset.id    })  },  scroll(e) {    let scrollHeight = e.detail.scrollTop;    let index = this.calculateIndex(this.data.heightArr,scrollHeight);    this.setData({      activeId: 'a'+index    })  },  // 计算滚动的区间  calculateHeight(height) {    if(!this.data.heightArr.length) {      this.data.heightArr.push(height)    }else {      this.data.heightArr.forEach(ele => {        height += ele      })      this.data.heightArr.push(height);    }  },  // 计算左边选中的下标  calculateIndex(arr, scrollHeight) {    let index= '';    for(let i =0;i<arr.length;i++) {      if (scrollHeight >= 0 && scrollHeight < arr[0]){        index = 0;      }else if(scrollHeight >= arr[i-1] && scrollHeight < arr[i]){        index = i;      }    }    return index+1;  }})

/**index.wxss**/.container {  padding: 0;  width:100%;  height: 100vh;  display: flex;  flex-direction: row;  align-items: flex-start;}.category-left {  height: 100%;  width: 22%;  padding: 0 20rpx;  box-sizing: border-box;  border-right: 1px solid #efefef;}.catgegory-item {  padding: 20rpx 0;  font-size: 30rpx;  text-align:  center;}.active-item {  color: orange;}.category-right {  flex:1;  height: 100%;}.category-content {  display: grid;  grid-template-columns: repeat(auto-fill, 190rpx);}.category-title {  text-align: center;}.content-item {  display: flex;  flex-direction: column;  padding: 20rpx;  text-align: center;  font-size: 30rpx;}.content-item image{  width: 120rpx;  height: 120rpx;}