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

So erhalten Sie den Inhalt einer TXT-Datei über FileReader in JS

Inhaltsverzeichnis JS erhält den Inhalt der TXT-D...

Beispiel für die MySQL-Triggeroperation „Hinzufügen“, „Löschen“, „Ändern“ und „Abfragen“

In diesem Artikel werden anhand von Beispielen di...

Mysql implementiert die regelmäßige Bereinigung alter Daten in einer Tabelle und die Beibehaltung mehrerer Datenstücke (empfohlen)

Um folgende Ziele zu erreichen: Die MySQL-Datenba...

Eine einfache Möglichkeit, alle Funktionen des Einkaufswagens in Vue zu implementieren

Die Hauptfunktionen sind wie folgt: Produktinform...

Detaillierte Konfigurationsschritte zur Installation von Linux (CentOS) unter einer virtuellen VMware-Maschine

CentOS7 herunterladen Das Image, das ich herunter...

Vue verwendet Element-UI, um die Menünavigation zu implementieren

In diesem Artikel wird der spezifische Code von V...

7 Interviewfragen zu JS, wie viele können Sie richtig beantworten

Vorwort In JavaScript ist dies der Kontext zum Au...

Detaillierte Erklärung zur Verwendung von INS und DEL zum Markieren von Dokumentänderungen

ins und del wurden in HTML 4.0 eingeführt, um Auto...

Docker+Gitlab+Jenkins erstellt automatisierte Bereitstellung von Grund auf

Inhaltsverzeichnis Vorwort: 1. Docker installiere...

Vue+Element+Springboot zum Implementieren eines Beispiels für die Anzeigefunktion des Fortschrittsbalkens beim Dateidownload

Inhaltsverzeichnis 1. Nachfragehintergrund 2. Opt...

Lösung zum Vergessen des MySQL-Passworts unter Linux

Das Problem ist folgendes: Ich habe den Befehl my...

Das Implementierungsprinzip des Zabbix-Sammelskripts zur dynamischen Ausführungsüberwachung

Wenn Sie benutzerdefinierte Zabbix-Skripte zum Sa...

Kreatives „Über uns“-Webseitendesign

Einzigartige „Über“-Seiten Eine gute Möglichkeit, ...

JS erhält Fünf-Sterne-Lob

In diesem Artikel wird der spezifische Code von J...

Einige Fähigkeiten, die Sie beim Erstellen von Webseiten kennen müssen

1. Z-Index ist in IE6 ungültig. In CSS wird die E...