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

Apabila menggunakan uniapp untuk membangunkan aplikasi mudah alih, anda sering menghadapi keperluan untuk melaksanakan penatalan mendatar. Contohnya, menu mendatar, karusel imej, penyemakan imbas halaman, dsb. Secara lalai, bar skrol mendatar sistem sendiri akan muncul apabila menatal secara mendatar. Walau bagaimanapun, dalam beberapa kes di mana reka letak reka bentuk adalah indah dan gaya disatukan, bar skrol lalai ini boleh memusnahkan keseluruhan kesan reka bentuk. Oleh itu, bagaimana untuk mengeluarkan bar skrol mendatar telah menjadi masalah yang perlu diselesaikan.

Artikel ini akan memperkenalkan cara mengalih keluar bar skrol mendatar dalam uniapp. Untuk kemudahan, contoh berikut akan menggunakan menu mendatar sebagai contoh.

1. Analisis Prinsip

Bagaimana untuk mengalih keluar bar skrol mendatar dalam HTML dan CSS? Kita boleh mencapai ini dengan menetapkan atribut limpahan-x elemen kepada tersembunyi. Contohnya, kod berikut boleh menghalang elemen daripada mempunyai bar skrol mendatar:

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

Dalam uniapp, kami boleh mengalih keluar bar skrol mendatar melalui kaedah yang serupa. Mengambil menu mendatar sebagai contoh, kita boleh mentakrifkan kod yang serupa dengan yang berikut dalam templat:

<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>

Kemudian, dalam gaya, kita boleh mentakrifkan gaya berikut:

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

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

Dengan cara ini anda boleh melaksanakan menu mendatar tanpa bar skrol mendatar.

2. Demo

Untuk menunjukkan kesan bar skrol mendatar dengan lebih baik, kami boleh menambah beberapa gaya dan animasi untuk menjadikan keseluruhan proses lebih meriah dan menarik. Di bawah ialah demo ringkas yang menunjukkan cara melaksanakan menu mendatar tanpa bar skrol mendatar.

<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>

Demo ini mengandungi menu mendatar dan enam halaman. Apabila kita mengklik pada menu, halaman semasa akan bertukar ke halaman yang sepadan, disertai dengan menukar animasi. Ia boleh dilihat bahawa jarak antara item menu, ketinggian item menu, warna baris, dan lain-lain semuanya ditakrifkan mengikut situasi sebenar untuk mencapai kesan visual yang terbaik.

3. Kesimpulan

Melalui pengenalan artikel ini, kami tahu cara mengalih keluar bar skrol mendatar dalam uniapp, supaya kami boleh menyesuaikan aplikasi mudah alih dengan lebih baik. Selain menu mendatar, teknik ini juga boleh digunakan pada senario penatalan mendatar yang lain, seperti karusel imej, penyemakan halaman halaman, dsb. Jika anda berminat, anda boleh menjalankan pembangunan yang lebih kaya atas dasar ini.

Secara amnya, uniapp ialah rangka kerja aplikasi mudah alih yang sangat berkuasa Ia membolehkan kami menggunakan sintaks Vue.js, pembangunan pesat, penggunaan merentas hujung dan mempunyai komuniti pembangun yang baik. Dengan membaca artikel ini, saya percaya anda boleh menguasai kemahiran pembangunan uniapp dengan lebih baik dan menambah alat yang berkuasa pada pembangunan aplikasi mudah alih.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar bar skrol apabila menatal secara mendatar dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!