uniapp分段器怎么在页面左侧竖着排列

UniApp 的分段器（Segment）通常用于展示选项并让用户选择，如果需要将它放在页面的左侧并竖直排列，你可以通过自定义组件或者调整样式来实现。以下是步骤：

1. **创建自定义分段器组件**:
首先，在 UniApp 中，可以考虑创建一个自定义的 SegmentedControl 组件，比如将其布局为垂直方向。使用 Vue 的 `v-for` 循环遍历选项，并设置每个按钮的 `style` 属性，使其显示为竖向排列。

<template>
  <view class="segmented-control">
    <view v-for="(item, index) in items" :key="index" style="{ flexDirection: 'column', alignItems: 'flex-start' }">
      <button @click="selectItem(item)" :class="{ active: item === currentSelection }">{{ item.label }}</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [...], // 你的选项数组
      currentSelection: null,
    };
  },
  methods: {
    selectItem(item) {
      this.currentSelection = item;
    }
  }
};
</script>

<style scoped>
.segmented-control {
  display: flex; /* 确保容器是弹性布局 */
}
</style>

2. **应用到页面上**:
将这个自定义的分段器添加到你需要的位置，如页面的左侧栏组件内，调整其宽度和其他样式适应整体设计。