So lösen Sie das Problem, dass die Scroll-Ansicht des WeChat-Applets nicht nach links und rechts verschoben werden kann

So lösen Sie das Problem, dass die Scroll-Ansicht des WeChat-Applets nicht nach links und rechts verschoben werden kann

Ich arbeite derzeit an einem eigenen kleinen Programmprojekt. Weil es kein professionelles Frontend ist. So fiel ich bei jedem Schritt in eine Grube. Die mir aufgetretenen Probleme möchte ich hier zusammenfassen. Vermeiden Sie eine Wiederholung der Grube.

Frage:

Beim Layout der Miniprogrammseite habe ich die Scroll-View-Komponente verwendet, stellte jedoch fest, dass die horizontale Bewegung keinen Effekt hatte. Ich habe online einige Informationen nachgeschaut und das Problem gefunden.

Mein WXML-Code

<scroll-view scroll-x="true" class="scroll" bindscrolltolower="niedriger" bindscroll="scroll">
        <Klasse anzeigen="Benutzerinformationen">
          <Ansichtsklasse="Benutzerkopf">
            <Bild src="../../icon/head.jpg"></Bild>
          </Ansicht>
          <view class="Benutzername">Zhang San</view>
        </Ansicht>
        <Klasse anzeigen="Benutzerinformationen">
          <Ansichtsklasse="Benutzerkopf">
            <Bild src="../../icon/head.jpg"></Bild>
          </Ansicht>
          <view class="Benutzername">Zhang San</view>
        </Ansicht>
        <Klasse anzeigen="Benutzerinformationen">
          <Ansichtsklasse="Benutzerkopf">
            <Bild src="../../icon/head.jpg"></Bild>
          </Ansicht>
          <view class="Benutzername">Zhang San</view>
        </Ansicht>
        <Klasse anzeigen="Benutzerinformationen">
          <Ansichtsklasse="Benutzerkopf">
            <Bild src="../../icon/head.jpg"></Bild>
          </Ansicht>
          <view class="Benutzername">Zhang San</view>
        </Ansicht>
        <Klasse anzeigen="Benutzerinformationen">
          <Ansichtsklasse="Benutzerkopf">
            <Bild src="../../icon/head.jpg"></Bild>
          </Ansicht>
          <view class="Benutzername">Zhang San</view>
        </Ansicht>
        <Klasse anzeigen="Benutzerinformationen">
          <Ansichtsklasse="Benutzerkopf">
            <Bild src="../../icon/head.jpg"></Bild>
          </Ansicht>
          <view class="Benutzername">Zhang San</view>
        </Ansicht>
        <Klasse anzeigen="Benutzerinformationen">
          <Ansichtsklasse="Benutzerkopf">
            <Bild src="../../icon/head.jpg"></Bild>
          </Ansicht>
          <view class="Benutzername">Zhang San</view>
        </Ansicht>
        <Klasse anzeigen="Benutzerinformationen">
          <Ansichtsklasse="Benutzerkopf">
            <Bild src="../../icon/head.jpg"></Bild>
          </Ansicht>
          <view class="Benutzername">Zhang San</view>
        </Ansicht>
        <Klasse anzeigen="Benutzerinformationen">
          <Ansichtsklasse="Benutzerkopf">
            <Bild src="../../icon/head.jpg"></Bild>
          </Ansicht>
          <view class="Benutzername">Zhang San</view>
        </Ansicht>
       

      </scroll-ansicht>

WXSS-Code

.enroll_view .scroll_view .scroll{
  Höhe: 160rpx;
  Breite: 750rpx;
  Überlauf: versteckt;
}
.Benutzerinfo{
  schweben: links;
  Rand oben: 10rpx;
  Höhe: 140rpx;
  Breite: 140rpx;
}

Die Idee ist ganz einfach. Ich möchte float:left; verwenden, um die Elemente anzuordnen, die horizontal verschoben werden müssen. Nachdem ich die Informationen geprüft hatte, stellte ich fest, dass Elemente, die gleiten müssen, nicht Float verwenden können. Um diesen Effekt zu erzielen, müssen Sie display:inline-block; verwenden.

Fahren Sie mit der Änderung fort (löschen Sie float:left und verwenden Sie display:inline-block, um den Effekt einer horizontalen Anordnung der Unterelemente zu erzielen).

wxss-Stil

.Benutzerinfo{
  Rand oben: 10rpx;
  Höhe: 140rpx;
  Breite: 140rpx;
  Anzeige: Inline-Block;
}

Nachdem Sie Änderungen vorgenommen haben, stellen Sie fest, dass es immer noch nicht funktioniert. Und es wurde festgestellt, dass die Zeile umbrochen wurde, nachdem das Teilmengenelement die Breite überschritten hatte.

Fügen Sie der Bildlaufansicht daher white-space: nowrap; hinzu, um ein Umbrechen der internen Elemente zu verhindern. Aktualisieren. Erzielen Sie den endgültigen Effekt. Kaisen. Rendern

Endgültige Version wxss

.enroll_view .scroll_view .scroll{
  Höhe: 160rpx;
  Breite: 750rpx;
  Überlauf: versteckt;
  Leerzeichen: Nowrap;
}
.Benutzerinfo{
  Rand oben: 10rpx;
  Höhe: 140rpx;
  Breite: 140rpx;
  Anzeige: Inline-Block;
}

Knoten

1. Die Elemente, die in der Bildlaufansicht verschoben werden müssen, können nicht schweben, um den horizontalen Anordnungseffekt zu erzielen. Sie können display:inline-block; verwenden, um sie in Inline-Blockelemente umzuwandeln.

2. Die Verwendung von „display:flex“ auf einem großen Feld in der Bildlaufansicht, das Elemente enthält, die verschoben werden müssen, hat keine Wirkung.

3. Das große Feld, das die Bildlaufansicht umschließt, hat eine klare Breite und den Stil white-space:nowrap;

Anbei die wichtigsten Eigenschaften der Scroll-Ansicht:

Zusammenfassen

Dies ist das Ende dieses Artikels zur Lösung des Problems, dass die Scroll-Ansicht des WeChat-Miniprogramms nicht nach links und rechts verschoben werden kann. Weitere relevante Inhalte zur Scroll-Ansicht des WeChat-Miniprogramms, die nach links und rechts verschoben werden kann, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Beispiel für die Implementierung einer Scroll-Ansicht eines WeChat-Applets mit verschiebbarem Anker
  • Das WeChat-Applet verwendet das Scroll-View-Tag, um einen Beispielcode für die Funktion „Automatisches Verschieben nach unten“ zu realisieren.
  • Die Scroll-Ansicht des WeChat-Applets imitiert die horizontale verschiebbare Bildlaufleiste von Pinduoduo
  • WeChat-Applet - Horizontal verschiebbare Scroll-Ansicht verbirgt die Bildlaufleiste
  • Beispielcode für horizontal verschiebbare und verschachtelte Scroll-View-For-Schleife des WeChat-Applets

<<:  Allgemeine grundlegende Linux-Befehle und -Verwendung

>>:  Installations- und Konfigurationstutorial von MySQL 8.0.16 unter Win10

Artikel empfehlen

Details zum Überschreiben von Prototypmethoden in JavaScript-Instanzobjekten

Inhaltsverzeichnis In JavaScript können wir norma...

Erklärung zur Verwendung von JavaScript ECharts

Ich habe ECharts schon einmal bei einem Projekt v...

Keepalived+Nginx+Tomcat-Beispielcode zur Implementierung eines hochverfügbaren Webclusters

Keepalived+Nginx+Tomcat zur Erzielung eines hochv...

Zusammenfassung zur Verwendung von HTML-Meta-Tags (empfohlen)

Meta-Tag-Funktion Der META-Tag ist ein Schlüsselt...

Detaillierte Erläuterung des Prozesses zum Erstellen und Ausführen von Docker-Containern

Ziehen Sie einfach das Image, erstellen Sie einen...

Eine detaillierte Einführung in die Linux-Systemkonfiguration (Dienststeuerung)

Inhaltsverzeichnis Vorwort 1. Systemdienststeueru...

Beispiele für die Verwendung des ES6-Spread-Operators

Inhaltsverzeichnis Was sind Spread- und Rest-Oper...

Eine kurze Erläuterung der ifnull()-Funktion ähnlich der nvl()-Funktion in MySQL

IFNULL(Ausdruck1,Ausdruck2) Wenn expr1 nicht NULL...

Gründe und Lösungen für die Unfähigkeit, Array-Änderungen in Vue2 zu erkennen

Inhaltsverzeichnis Problemumgehung Warum kann ich...

So konvertieren Sie Chinesisch in HTML in UTF-8

In HTML kann die chinesische Phrase „學好好學“ als „學...

Detaillierte Erklärung, wie Vue-Komponenten Werte untereinander übertragen

Inhaltsverzeichnis Überblick 1. Die übergeordnete...

Beispielcode für die Verwendung von Nginx zur Implementierung einer 301-Weiterleitung zum https-Stammdomänennamen

Aus SEO- und Sicherheitsgründen ist eine 301-Weit...

Detaillierte Erklärung der Docker-Einstiegspunktdatei

Schließen Sie beim Schreiben einer Docker-Datei e...

Detaillierte Beschreibung des komponentenbasierten Front-End-Entwicklungsprozesses

Hintergrund <br />Studenten, die am Front-En...

Mehrere Möglichkeiten zum Verschlüsseln und Entschlüsseln von MySQL (Zusammenfassung)

Inhaltsverzeichnis Vorne geschrieben Zwei-Wege-Ve...