Uniapp entfernt Bildlaufleisten

Angesichts der Beliebtheit mobiler Anwendungen wird uniapp als Cross-End-Anwendungsentwicklungs-Framework auf Basis von Vue.js häufig auf mehreren Plattformen eingesetzt. Was ich hier besprechen möchte, ist, wie man die Standard-Bildlaufleiste von Uniapp im Applet entfernt.

Standardmäßig zeigen Komponenten wie Swiper und ScrollView in Miniprogrammen Bildlaufleisten auf iOS und Android an, aber in der Branche ist es manchmal notwendig, diese Bildlaufleisten auszublenden. Wie werden wir diese Bildlaufleisten los? Als nächstes werde ich Ihnen konkrete Lösungen anbieten.

Die Bildlaufleiste des Uniapp-Applets wird standardmäßig vom WeChat-Client bereitgestellt, und der WeChat-Client stellt die entsprechende API nicht für den Betrieb bereit. Um die Bildlaufleiste zu entfernen, müssen wir mit dem Entwicklungsframework uniapp beginnen.

Methode 1: Durch Festlegen des Seitenstils

Fügen Sie den folgenden Code in App.vue hinzu:

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

Indem Sie -scrollbar-width und -ms-overflow-style der Bildlaufansicht auf „Keine“ setzen und dann Folgendes übergeben: -webkit-scrollbar macht die Bildlaufleiste unsichtbar, um die Bildlaufleiste zu entfernen.

Der Nachteil dieser Methode besteht jedoch darin, dass es bei komplexeren Seiten zu Verwirrungen im Seitenstil kommen kann.

Methode 2: Plug-Ins verwenden

Im Plug-In-Markt von uniapp gibt es eine Komponentenbibliothek namens „uni-ui“. In dieser Komponentenbibliothek gibt es eine Komponente namens „uni-list“, die unterstützt Benutzerdefinierte Bildlaufleisten können verwendet werden, um den Effekt zu erzielen, dass die Standard-Bildlaufleiste entfernt wird.

Die Schritte zur Verwendung dieser Komponente sind wie folgt:

Zuerst müssen wir die Uni-List-Komponente in Komponenten einführen:

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

Indem Sie das Show-Scrollbar-Attribut von Uni-List auf „false“ setzen, können Sie die Standardeinstellung ausblenden Bildlaufleiste.

Bisher haben wir zwei Methoden eingeführt, um die Standard-Bildlaufleiste im Uniapp-Applet zu entfernen. Es ist zu beachten, dass beide Methoden zwar den Effekt des Entfernens von Bildlaufleisten erzielen können, diese Methoden jedoch aufgrund des Aktualisierungsmechanismus des WeChat-Clients bei einigen Versionen möglicherweise nicht effektiv sind. Wenn in unserer Anwendung ein Problem mit der Bildlaufleiste auftritt, müssen wir verschiedene Versionen testen, um das Problem zu lokalisieren und es entsprechend zu behandeln.

Zusammenfassend lässt sich sagen, dass es viele Möglichkeiten gibt, die Standard-Bildlaufleiste im Uniapp-Applet zu entfernen. Sie können je nach Situation und Bedarf eine geeignete Lösung auswählen.

Das obige ist der detaillierte Inhalt vonUniapp entfernt Bildlaufleisten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!