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

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

一、首先介绍下scroll-view

可滚动视图区域。案例用到如下属性（如需了解更多请访问官网https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html）：
以下属性1.0.0版本即可

<!--pages/order/index.wxml-->
<view class="container" style="background:#ebebeb;">
<view class="p-10">
<scroll-view scroll-x>
<view class="scroll">
<view class="item">
<image src=""/>
</view>
<view class="item">
1
</view>
<view class="item">
1
</view>
<view class="item">
1
</view>
<view class="item">
1
</view>
<view class="item">
1
</view>
<view class="item">
1
</view>
<view class="item">
1
</view>
</view>

</scroll-view>
</view>
</view>

.scroll{
white-space: nowrap;
}
.scroll .item{
width:100px;
height:100px;
display: inline-block;
}

https://www.octfgroup.com/