vant 横向下拉菜单

### Vant 框架实现横向下拉菜单

在 Vant 中，`DropdownMenu` 和 `DropdownItem` 组件用于创建下拉菜单。为了实现横向下拉菜单的效果，可以通过设置 CSS 样式以及利用组件提供的 API 来达到目的。

#### HTML 结构

<van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1"/>
  <van-dropdown-item v-model="value2" :options="option2"/>
</van-dropdown-menu>

#### 自定义样式调整方向
为了让下拉菜单变为横向布局，需要覆盖默认的垂直排列方式：

.van-dropdown-menu__bar {
    display: flex;
    justify-content: space-around; /* 均匀分布 */
}

.van-dropdown-item {
    width: auto !important;
}

上述代码片段展示了如何通过修改 `.van-dropdown-menu__bar` 的 Flexbox 属性使各个选项均匀分布在一行内[^1]。

#### JavaScript 控制逻辑
当自定义了 `DropdownItem` 内容时，需调用实例上的 `toggle()` 方法来手动控制菜单显隐状态。这允许开发者更灵活地处理交互行为并集成额外的功能需求。

对于具体的使用场景而言，在移动端应用开发过程中可能还会涉及到页面滚动监听等问题。例如，如果希望随着用户的滑动操作而动态更新顶部导航栏中的激活项，则可以借助于诸如 `scrollIntoView()`, `scrollTop`, `clientHeight` 等 DOM API 进行相应的判断与响应[^2]。