小程序scroll-view實現左右聯動

自己動手開始做一個點餐系統試試手,想要實現點擊左邊分類,右邊進行模塊跳轉的功能.一開始摸索了很久,看不懂官方文檔關於scroll-into-view這一屬性的定義.後動手實操+百度終於搞懂,下面附上代碼

wxml:

<scroll-view class="scroll" scroll-y>
          <view wx:for="{{ left }}" bindtap="scroll" data-id="{{index}}">{{ item }}</view>
        </scroll-view>
        
        <scroll-view class="content" scroll-y scroll-into-view="{{ intoindex }}" scroll-with-animation>
          <view wx:for="{{ content }}" id='content{{index}}'>{{ item }}</view>
        </scroll-view>

js:

data: {
    left: ['推薦', '甜湯', '促肉', '包類'],
    content: {
      0: ['薏米', '花生漿'],
      1: ['薏米', '黑米', '八寶粥', '花生漿'],
      2: ['薏米促肉', '粿條促肉','面促肉'],
      3: ['饅頭', '肉包','叉燒包','奶黃包','流沙包'],
    },
  },
  scroll: function(e) {
    this.setData({
      intoindex: 'content'+e.currentTarget.dataset.id
    })
  },

通過綁定事件scroll,每次單擊獲取對應元素的id,再將其綁定到intoindex上,此處是將intoindex接下來顯示的內容要跳轉到的位置,即id='content{{index}}'處,由於官方規定id不能以數字開頭,所以intoindex前面加上了'content'

一開始想要通過修改content裏的數據進行調試,後來發現並不需要.走了彎路,然後在跳轉一步中一開始將下標設置成了字母,所以導致跳轉不了