WeChatアプレットのスクロールビューが左右連動効果を実現

<ビュークラス="コンテナ">
  <view class="category-left">
    <スクロールビュー scroll-y="true" スタイル="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>
      </ブロック>
    </スクロールビュー>
  </ビュー>
  <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">
                <画像 src="{{i.src}}"></画像>
                <テキスト>{{i.テキスト}}</テキスト>                                                      
              </ビュー>
          </ビュー>
        </ビュー> 
      </ブロック>
      </ビュー>
    </スクロールビュー>
  </ビュー>
</ビュー>

//index.js
//アプリケーションインスタンスを取得する const app = getApp()

ページ（{
  データ： {
    表示: 'a1',
    アクティブID: 'a1',
    カテゴリ：
      {名前: '新製品'、ID: 'a1'},
      { 名前: 'クラウドファンディング', id: 'a2' },
      { 名前: 'Xiaomi 携帯電話'、ID: 'a3' },
      { 名前: 'redmi 電話'、 ID: 'a4' },
      { 名前: 'ブラックシャークゲーム'、 ID: 'a5' },
      { name: "携帯電話アクセサリー", id: 'a6' },
      { 名前: 'TV', ID: 'a7'},
      { 名前: 'コンピュータ'、 ID: 'a8' },
    ]、
    コンテンツ： [
      {
        タイトル: '- 新製品 -', 
        オプション: [
          { src: '../../image/redmi.png',id: '001',text: 'redmi8'},
          { src: '../../image/redmi.png', id: '002', テキスト: 'redmi8A' },
          { src: '../../image/redmi.png', id: '003', テキスト: 'Xiaomi 9pro 5G'},
          { src: '../../image/redmi.png', id: '004', テキスト: 'redmi8'},
          { src: '../../image/redmi.png', id: '005', テキスト: 'redmi8' }
        ]、
        id: 'a1'
      },
      {
        タイトル: 「- クラウドファンディング -」
        オプション: [
          { src: '../../image/zhongchou.png', id: '006', テキスト: 'redmi8' },
          { src: '../../image/zhongchou.png', id: '007' ,text: 'redmi8'},
          { src: '../../image/zhongchou.png', id: '008', テキスト: 'redmi8' },
          { src: '../../image/zhongchou.png', id: '009',text: 'redmi8' }
        ]、
        id: 'a2'
      },
      {
        タイトル: '- Xiaomi 携帯電話 -',
        オプション: [
          { src: '../../image/xiaomi.png', id: '006', テキスト: 'redmi8' },
          { src: '../../image/xiaomi.png', id: '007', テキスト: 'redmi8' },
          { src: '../../image/xiaomi.png', id: '008', テキスト: 'redmi8' },
          { src: '../../image/xiaomi.png', id: '009', テキスト: 'redmi8' }
        ]、
         id: 'a3'
      },
      {
        タイトル: '- redmi 携帯電話 -',
        オプション: [
          { src: '../../image/hongmi.png', id: '006', テキスト: 'redmi8' },
          { src: '../../image/hongmi.png', id: '007', テキスト: 'redmi8' },
          { src: '../../image/hongmi.png', id: '008', テキスト: 'redmi8' },
          { src: '../../image/hongmi.png', id: '009', テキスト: 'redmi8' }
        ]、
        id: 'a4'
      }

    ]、
  },
  //イベント処理関数 onLoad: function () {
    this.setData({
      表示: 'a1',
      高さArr: []
    })
    クエリを wx.createSelectorQuery() に設定します。
    クエリ.selectAll('.catefory-main').boundingClientRect((rect)=> {
      rect.forEach(ele => {
        this.calculateHeight(ele.height);
      })
    }).exec();
  },
  クリックアイテム(e) {
    this.setData({
      アクティブID: e.currentTarget.dataset.id、
      toView: e.currentTarget.dataset.id
    })
  },
  スクロール(e) {
    scrollHeight を e.detail.scrollTop とします。
    index = this.calculateIndex(this.data.heightArr,scrollHeight); とします。
    this.setData({
      アクティブID: 'a'+インデックス
    })

  },
  // スクロール間隔を計算する calculateHeight(height) {
    if(!this.data.heightArr.length) {
      this.data.heightArr.push(高さ)
    }それ以外 {
      this.data.heightArr.forEach(ele => {
        高さ += 要素
      })
      this.data.heightArr.push(高さ);
    }
  },
  // 左側で選択された下付き文字を計算する calculateIndex(arr, scrollHeight) {
    インデックスを '' とします。
    for(let i =0;i<arr.length;i++) {
      スクロール高さ >= 0 && スクロール高さ < arr[0]){
        インデックス = 0;
      }それ以外の場合(スクロール高さ >= arr[i-1] && スクロール高さ < arr[i]){
        インデックス = i;
      }
    }
    インデックス+1を返します。
  }
})

/**index.wxss**/
。容器 {
  パディング: 0;
  幅:100%;
  高さ：100vh;
  ディスプレイ: フレックス;
  flex-direction: 行;
  align-items:flex-start;
}
.category-left {
  高さ: 100%;
  幅: 22%;
  パディング: 0 20rpx;
  ボックスのサイズ: 境界線ボックス;
  右境界線: 1px 実線 #efefef;
}
.カテゴリ項目{
  パディング: 20rpx 0;
  フォントサイズ: 30rpx;
  テキスト配置: 中央;
}
.アクティブアイテム{
  色: オレンジ;
}
.カテゴリ右{
  フレックス：1;
  高さ: 100%;
}
.カテゴリコンテンツ{
  表示: グリッド;
  グリッドテンプレート列: repeat(auto-fill, 190rpx);
}
.カテゴリータイトル{
  テキスト配置: 中央;
}
.コンテンツアイテム{
  ディスプレイ: フレックス;
  flex-direction: 列;
  パディング: 20rpx;
  テキスト配置: 中央;
  フォントサイズ: 30rpx;
}
.コンテンツアイテム画像{
  幅: 120rpx;
  高さ: 120rpx;
}