Bagaimana untuk mengalih keluar bar skrol apabila menatal secara mendatar dalam uniapp

<div style="width: 300px; height: 200px; overflow-x: hidden;">
  这是一个不会出现横向滚动条的div。
</div>

<template>
  <div class="menu-container">
    <div class="menu-item">菜单1</div>
    <div class="menu-item">菜单2</div>
    <div class="menu-item">菜单3</div>
    <div class="menu-item">菜单4</div>
    <div class="menu-item">菜单5</div>
    <div class="menu-item">菜单6</div>
  </div>
</template>

.menu-container {
  overflow-x: hidden; /* 隐藏横向滚动条 */
  white-space: nowrap; /* 让菜单项水平排列 */
}

.menu-item {
  display: inline-block; /* 使菜单项显示在同一行 */
  margin-right: 20px; /* 间隔 */
}

<template>
  <div class="menu-container">
    <div class="menu-item" @click="toggleMenu(1)">菜单1</div>
    <div class="menu-item" @click="toggleMenu(2)">菜单2</div>
    <div class="menu-item" @click="toggleMenu(3)">菜单3</div>
    <div class="menu-item" @click="toggleMenu(4)">菜单4</div>
    <div class="menu-item" @click="toggleMenu(5)">菜单5</div>
    <div class="menu-item" @click="toggleMenu(6)">菜单6</div>
  </div>
  <div class="page-container">
    <div :class="{ &#39;page&#39;: true, &#39;show&#39;: showPage1 }">
      <h2>这是菜单1对应的页面</h2>
      <p>点击其他菜单可以查看不同的页面</p>
    </div>
    <div :class="{ &#39;page&#39;: true, &#39;show&#39;: showPage2 }">
      <h2>这是菜单2对应的页面</h2>
      <p>uniapp是一种跨平台的开发框架</p>
    </div>
    <div :class="{ &#39;page&#39;: true, &#39;show&#39;: showPage3 }">
      <h2>这是菜单3对应的页面</h2>
      <p>基于Vue.js开发</p>
    </div>
    <div :class="{ &#39;page&#39;: true, &#39;show&#39;: showPage4 }">
      <h2>这是菜单4对应的页面</h2>
      <p>支持多端发布</p>
    </div>
    <div :class="{ &#39;page&#39;: true, &#39;show&#39;: showPage5 }">
      <h2>这是菜单5对应的页面</h2>
      <p>可以快速开发APP、小程序、H5等应用</p>
    </div>
    <div :class="{ &#39;page&#39;: true, &#39;show&#39;: showPage6 }">
      <h2>这是菜单6对应的页面</h2>
      <p>感谢您使用uniapp框架</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPage1: true,
      showPage2: false,
      showPage3: false,
      showPage4: false,
      showPage5: false,
      showPage6: false
    }
  },
  methods: {
    toggleMenu(n) {
      this.showPage1 = false;
      this.showPage2 = false;
      this.showPage3 = false;
      this.showPage4 = false;
      this.showPage5 = false;
      this.showPage6 = false;
      this["showPage" + n] = true;
    }
  }
}
</script>

<style>
.menu-container {
  overflow-x: hidden;
  white-space: nowrap;
  font-size: 0; /* 防止inline-block元素产生空白间隙的老生常谈，设置font-size为0即可 */
}

.menu-item {
  display: inline-block;
  height: 80px;
  font-size: 16px;
  line-height: 80px;
  margin-right: 20px;
  padding: 0 20px;
  background-color: #eee;
  border-radius: 10px;
  cursor: pointer;
}

.page-container {
  margin-top: 20px;
}

.page {
  display: none;
  height: 300px;
  padding-top: 100px;
  text-align: center;
  font-size: 24px;
}

.page.show {
  display: block;
  animation: slide 0.5s ease-out;
}

@keyframes slide {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>