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

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

Frage:

Knoten

Anbei die wichtigsten Eigenschaften der Scroll-Ansicht:

Zusammenfassen

CSS-Menüschaltflächenanimation

CSS-Namenskonventionen (Regeln), die es wert sind, gesammelt zu werden Häufig verwendete CSS-Namensregeln

Beispiel für die Verwendung von JSX zum Erstellen einer Komponentenparserentwicklung

Implementierungscode der Funktion zur Benutzervorschauzeitüberwachung der Vue-Seite

So geben Sie chinesische Zeichen im Linux-Kernel aus

Detailliertes Tutorial zum Erstellen einer privaten Nextcloud-Cloud-Speichernetzwerkfestplatte

Allgemeine Überlegungen zum Erstellen eines Hadoop 3.2.0-Clusters

Vue-Handschrift-Ladeanimationsprojekt

So speichern Sie „false“ oder „true“ in MySQL

8 wichtige JavaScript-Codefragmente für Ihr Projekt

Artikel empfehlen

Bei Verwendung eines Bilds als Beschriftung funktioniert das for-Attribut im IE nicht

Wie werden Vue-Komponenten analysiert und gerendert?

Eine detaillierte Einführung in die Verwendung von Blockkommentaren in HTML

Detailliertes Tutorial zur Installation von Docker auf CentOS 8

So führen Sie einen Befehl zu einem bestimmten Zeitpunkt in Linux aus

js zur Realisierung der automatischen Sperrbildschirmfunktion

Detaillierte Erklärung der Semiotik in Html/CSS

JavaScript implementiert eine bidirektionale verknüpfte Listenprozessanalyse

Detaillierte Erklärung des "/"-Problems, wenn proxy_pass gemäß dem Pfad weiterleitet

Zusammenfassung der Vue-Datenreaktionsfähigkeit

Zusammenfassung häufig verwendeter SQL-Anweisungen zum Erstellen von MySQL-Tabellen

So kapseln Sie die Karussellkomponente in Vue3

Installieren Sie das Linux rhel7.3-Betriebssystem auf der virtuellen Maschine (bestimmte Schritte)

Versteckter Overhead von Unix/Linux-Forks

So verwenden Sie den JS-Code-Compiler Monaco