uniapp scroll-view 横向滑动菜单,每个item根据首屏展示数量平均分配宽度

你可以使用 `flex` 布局来实现横向滑动菜单，并根据首屏展示数量平均分配宽度。以下是一个示例代码：

<template>
  <scroll-view class="menu" scroll-x>
    <view class="menu-item" v-for="(item, index) in menuItems" :key="index" :style="itemStyle">
      {{ item }}
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      menuItems: ['菜单1', '菜单2', '菜单3', '菜单4', '菜单5', '菜单6'],
      screenWidth: 375, // 屏幕宽度，可以根据实际情况修改
      visibleItemCount: 3 // 首屏展示的菜单数量，可以根据实际情况修改
    };
  },
  computed: {
    itemStyle() {
      const itemWidth = this.screenWidth / this.visibleItemCount;
      return `width: ${itemWidth}px`;
    }
  }
};
</script>

<style>
.menu {
  white-space: nowrap;
}

.menu-item {
  display: inline-block;
}
</style>

在上面的代码中，我们使用 `scroll-view` 组件来创建一个横向滑动的菜单栏。每个菜单项都通过 `v-for` 指令动态生成，并通过 `:style` 绑定属性设置每个菜单项的宽度。菜单项的宽度通过计算得出，将屏幕宽度除以首屏展示的菜单数量即可。通过设置 `white-space: nowrap` 和 `display: inline-block` 的样式，使菜单项水平排列并能够横向滑动。

请根据你的实际需求修改 `menuItems`、`screenWidth` 和 `visibleItemCount` 的值。