Comment supprimer la barre de défilement lors du défilement horizontal dans Uniapp

Lorsque nous utilisons Uniapp pour développer des applications mobiles, nous rencontrons souvent le besoin d'implémenter un défilement horizontal. Par exemple, un menu horizontal, un carrousel d’images, une navigation paginée, etc. Par défaut, la propre barre de défilement horizontale du système apparaîtra lors du défilement horizontal. Cependant, dans certains cas où la mise en page est exquise et le style unifié, cette barre de défilement par défaut peut détruire tout l'effet de conception. Par conséquent, comment supprimer la barre de défilement horizontale est devenu un problème qui doit être résolu.

Cet article explique comment supprimer la barre de défilement horizontale dans uniapp. Pour plus de commodité, l’exemple suivant utilisera un menu horizontal comme exemple.

1. Analyse de principe

Comment supprimer la barre de défilement horizontale en HTML et CSS ? Nous pouvons y parvenir en définissant l'attribut overflow-x de l'élément sur caché. Par exemple, le code suivant peut empêcher un élément d'avoir une barre de défilement horizontale :

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

Dans uniapp, nous pouvons supprimer la barre de défilement horizontale via une méthode similaire. En prenant comme exemple un menu horizontal, nous pouvons définir un code similaire au suivant dans le modèle :

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

Ensuite, dans le style, nous pouvons définir le style suivant :

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

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

De cette façon, nous pouvons implémenter un menu horizontal sans Menu à barre de défilement horizontale.

2. Démo

Afin de mieux démontrer l'effet de la barre de défilement horizontale, nous pouvons ajouter des styles et des animations pour rendre l'ensemble du processus plus vivant et intéressant. Vous trouverez ci-dessous une démo simple qui montre comment implémenter un menu horizontal sans barres de défilement horizontales.

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

Cette démo contient un menu horizontal et six pages. Lorsque nous cliquons sur le menu, la page actuelle basculera vers la page correspondante, accompagnée d'une animation de changement. On peut voir que l'espacement entre les éléments de menu, la hauteur des éléments de menu, les couleurs des lignes, etc. sont tous définis en fonction de la situation réelle pour obtenir le meilleur effet visuel.

3. Conclusion

Grâce à l'introduction de cet article, nous savons comment supprimer la barre de défilement horizontale dans uniapp, afin de mieux personnaliser l'application mobile. En plus des menus horizontaux, cette technique peut également être appliquée à d'autres scénarios de défilement horizontal, tels que les carrousels d'images, la navigation par pages, etc. Si vous êtes intéressé, vous pouvez réaliser un développement plus riche sur cette base.

En général, uniapp est un framework d'application mobile très puissant. Il nous permet d'utiliser la syntaxe Vue.js, un développement rapide, un déploiement cross-end et dispose d'une bonne communauté de développeurs. En lisant cet article, je pense que vous pourrez mieux maîtriser les compétences de développement d'uniapp et ajouter un outil puissant au développement d'applications mobiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!