Uniapp supprime les barres de défilement

Avec la popularité des applications mobiles, uniapp, en tant que framework de développement d'applications cross-end basé sur Vue.js, est largement utilisé sur plusieurs plates-formes. Ce dont je veux discuter ici, c'est comment supprimer la barre de défilement par défaut d'uniapp dans l'applet.

Par défaut, des composants tels que Swiper et ScrollView dans les mini-programmes afficheront des barres de défilement sur iOS et Android, mais dans l'industrie, il est parfois nécessaire de masquer ces barres de défilement. Alors, comment pouvons-nous nous débarrasser de ces barres de défilement ? Ensuite, je vous proposerai des solutions spécifiques.

La barre de défilement de l'applet uniapp est fournie par défaut par le client WeChat, et le client WeChat n'expose pas l'API correspondante pour le fonctionnement. Donc, pour supprimer la barre de défilement, nous devons commencer par le framework de développement uniapp.

Méthode 1 : En définissant le style de la page

Ajoutez le code suivant dans App.vue :

<style>
  /* 去掉小程序swiper组件的滚动条 */
  .swiper-container, .swiper-wrapper, .swiper-slide {
    overflow: hidden !important;
  }
  /* 去掉小程序scroll-view组件的滚动条 */
  .scroll-view {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .scroll-view::-webkit-scrollbar {
    display: none !important;
  }
</style>

En définissant -scrollbar-width et -ms-overflow-style de scroll-view sur none, puis transmettez :: -webkit-scrollbar définit la barre de défilement invisible pour supprimer la barre de défilement.

Cependant, l'inconvénient de cette méthode est que lorsque notre page est plus complexe, cela peut conduire à des styles de page confus.

Méthode 2 : Utiliser des plug-ins

Sur le marché des plug-ins d'uniapp, il existe une bibliothèque de composants appelée "uni-ui". Dans cette bibliothèque de composants, il existe un composant appelé "uni-list", qui prend en charge barres de défilement personnalisées peuvent être utilisées pour obtenir l'effet de suppression de la barre de défilement par défaut.

Les étapes pour utiliser ce composant sont les suivantes :

Tout d'abord, nous devons introduire le composant uni-list dans les composants :

<template>
  <view>
    <uni-list :show-scrollbar="false">
      <uni-list-item>item1</uni-list-item>
      <uni-list-item>item2</uni-list-item>
      <uni-list-item>item3</uni-list-item>
    </uni-list>
  </view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list/uni-list-item.vue'

export default {
  components: {
    uniList,
    uniListItem
  }
}
</script>

En définissant l'attribut show-scrollbar d'uni-list sur false, vous pouvez masquer la valeur par défaut barre de défilement.

Jusqu'à présent, nous avons introduit deux méthodes pour supprimer la barre de défilement par défaut dans l'applet uniapp. Il convient de noter que bien que les deux méthodes puissent avoir pour effet de supprimer les barres de défilement, en raison du mécanisme de mise à jour du client WeChat, ces méthodes peuvent ne pas être efficaces sur certaines versions. Lorsqu'un problème de barre de défilement survient dans notre application, nous devons tester différentes versions pour localiser le problème et le gérer en conséquence.

Pour résumer, il existe de nombreuses façons de supprimer la barre de défilement par défaut dans l'applet uniapp. Vous pouvez choisir une solution adaptée en fonction de différentes situations et besoins.

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!