微信小程序scroll-view详解及案例

需求：实现类似美团外卖。
1.点击左侧菜单右侧滚动到对应内容。
2.滚动右侧内容左侧对应菜单高亮。

一、首先介绍下scroll-view

可滚动视图区域。

以下属性1.0.0版本即可

属性	类型	默认值	必填	说明
scroll-y	boolean	false	否	允许纵向滚动
scroll-into-view	string		否	值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	boolean	false	否	在设置滚动条位置时使用动画过渡
bindscroll	eventhandle		否	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

二、案例
先来看下菜单的页面代码：

`<scroll-view scroll-y='true' class='nav'>
    <view wx:for='{
  {list}}'  wx:key='{
  {item.id}}'data-id='{
  {