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