外卖点餐列表滑动 微信小程序_微信小程序实现类似外卖平台右侧商品滑动时，左侧分类导航栏的相应分类被选中...

实现类似外卖平台右侧商品滑动时，左侧分类导航栏的相应分类被选中，可以通过以下步骤来实现：

1. 在 WXML 文件中，使用 scroll-view 组件来实现商品列表的滑动效果，同时使用 view 组件来展示商品列表和分类导航栏。

2. 在 JS 文件中，通过监听 scroll-view 组件的滚动事件，获取当前滚动的位置信息，并根据位置信息来确定当前选中的分类。

3. 在 CSS 文件中，设置分类导航栏中选中分类的样式，并根据选中状态来动态更新样式。

示例代码如下：

WXML 文件：

<view class="container">
  <view class="category">
    <scroll-view scroll-y="{{true}}" bindscroll="onScroll">
      <!-- 分类列表 -->
      <view class="category-item" wx:for="{{categoryList}}" wx:key="index">
        {{item}}
      </view>
    </scroll-view>
  </view>
  <view class="goods">
    <scroll-view scroll-y="{{true}}" bindscroll="onScroll">
      <!-- 商品列表 -->
      <view class="goods-item" wx:for="{{goodsList}}" wx:key="index">
        {{item}}
      </view>
    </scroll-view>
  </view>
</view>

JS 文件：

Page({
  data: {
    categoryList: ['热销', '折扣', '主食', '饮品'],
    goodsList: [...],
    selectedIndex: 0
  },
  onScroll: function (event) {
    // 获取滚动位置信息
    const scrollTop = event.detail.scrollTop;
    // 计算当前选中的分类
    const index = Math.floor(scrollTop / 100);
    // 更新选中状态
    this.setData({
      selectedIndex: index
    });
  }
});

CSS 文件：

.container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.category {
  width: 100px;
  background-color: #f0f0f0;
}

.category-item {
  height: 100px;
  line-height: 100px;
  font-size: 28rpx;
  text-align: center;
}

.category-item.selected {
  background-color: #fff;
  color: #f00;
}

.goods {
  flex: 1;
}

.goods-item {
  height: 200px;
  line-height: 200px;
  font-size: 28rpx;
  text-align: center;
}

上述代码中，假设商品列表中每个商品的高度为 200px，分类列表中每个分类的高度为 100px，当滚动位置超过每个分类的位置时，即可认为当前分类被选中。同时，根据选中状态来更新分类导航栏中选中分类的样式。