微信小程序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}

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

`