小程序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里的数据进行调试,后来发现并不需要.走了弯路,然后在跳转一步中一开始将下标设置成了字母,所以导致跳转不了