需求:实现类似美团外卖。
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} |
二、案例
先来看下菜单的页面代码:
`