Detaillierte Erläuterung der Scroll-View-Komponente des WeChat-Applets

In diesem Artikel werden hauptsächlich relevante Informationen zur Scroll-Ansicht der WeChat-Applet-Komponente vorgestellt. Ich hoffe, dass dieser Artikel jedem helfen kann, diesen Teil des Inhalts zu verstehen und zu beherrschen kann jedem helfen.

Ausführliche Erklärung der Scroll-Ansicht in der WeChat-Applet-Komponente

Heute werde ich die Probleme und Lösungen aufzeichnen, die beim Lernen der Scroll-Ansicht auftreten anderen Schülern geholfen.

Zeigen Sie zunächst den Effekt, den Sie erzielen möchten. ↓ Vertikales Scrollen implementiert das Scrollen nach oben und unten, und horizontales Scrollen implementiert das Scrollen nach links und rechts.

Fügen Sie zuerst den WXML-Code hinzu.

<view class="container"> 
 <view> 
  <text>vertical scroll</text> 
  <scroll-view scroll-y class="scroll-view-y" scroll-top="{{scrollTop}}"> 
   <view id="green" class="scroll-y-item bg_green"></view> 
   <view id="red" class="scroll-y-item bg_red"></view> 
   <view id="blue" class="scroll-y-item bg_blue"></view> 
   <view id="yellow" class="scroll-y-item bg_yellow"></view> 
  </scroll-view> 
 </view> 
 
 <view> 
  <text>horizontal scroll</text> 
  <scroll-view scroll-x class="scroll-view-x" style="width:100%"> 
   <view class="scroll-view-x"> 
    <view class="scroll-x-item bg_green"></view> 
    <view class="scroll-x-item bg_red"></view> 
    <view class="scroll-x-item bg_blue"></view> 
    <view class="scroll-x-item bg_yellow"></view> 
   </view> 
  </scroll-view> 
 </view> 
</view>

1. Die gesamte Schnittstelle wird durch eine Ansicht gepackt. Die Klasse dieser Ansicht wird beim Erstellen von QuickStart einbezogen und kann bei Bedarf angepasst werden. Danach umschließen die beiden Ansichten jeweils eine Scrollansicht und den Text darüber.

2. Die erste Scroll-Ansicht muss vertikal scrollen, scroll-y="{{true}}" setzen (oder scroll-y direkt schreiben). Die Klasse dieser Scrollansicht ist „scroll-view-y“, und der Code wird später angehängt. Das scroll-top-Attribut legt die Anfangsposition der Bildlaufleiste fest und scrollTop wird in den Daten der js-Datei deklariert (kann entfernt werden, wenn es nicht erforderlich ist).

3. Die vier Ansichten in der Scrollansicht, die keine Farben verwenden, haben bis auf die Farbe die gleichen Attribute.

ist der WXSS-Code der vertikalen Scrollansicht

.scroll-view-y { 
 height: 200px; 
 width: 100%; 
} 
 
.scroll-y-item { 
 height: 70px; 
 width: 100%; 
}

4 Die horizontale Scrollansicht ähnelt im Wesentlichen der vertikalen Scrollansicht.

(1) Die Scrollansicht in vertikaler Richtung umschließt direkt 4 Ansichten unterschiedlicher Farben. In horizontaler Richtung muss jeder Farbblock zuerst mit einer Ansicht umbrochen werden Blöcke sind horizontal angeordnet.

(2) WXSS-Datei

ist der WXSS-Code der horizontalen Bildlaufansicht, scroll-view-x ist das Attribut des horizontalen Schiebereglers, scroll-x-item ist das Each Element im horizontalen Schieberegler Eigenschaften des Farbblocks.

.scroll-view-x { 
 width: 300px; 
 height: 100px; 
 display: flex; 
 overflow: scroll; 
} 
 
.scroll-x-item { 
 width: 95px; 
 height: 100%; 
 display: inline-table; 
}

Sie können sehen:

①Der horizontale Schieberegler verfügt über zwei weitere Attribute: Anzeige und Überlauf. Die Anzeige ist auf Flex eingestellt und der Überlauf ist auf Scrollen eingestellt, wenn das untergeordnete Layout den übergeordneten Container überschreitet.

②Das Anzeigeattribut des Farbblocks ist auf Inline-Tabelle eingestellt. Dies ist sehr wichtig! ! ! Ich habe dieses Attribut am Anfang nicht geschrieben und konnte das horizontale Verschieben der Bildlaufansicht lange Zeit nicht erkennen. Nach meinen ständigen Versuchen habe ich es endlich ausprobiert und bin sehr zufrieden! Strecken Sie die Zunge heraus

Anbei finden Sie die offizielle Attributbeschreibung von WeChat ↓

Verwandte Empfehlungen:

Empfohlene 4 Artikel über die Scroll-View-Komponente

Detaillierte Erläuterung der Methode der Scroll-Ansicht zum Vervollständigen der Listenseite

Einführung in die Methode zur Implementierung der Scroll-Ansicht zum Ausblenden des Scrolls bar in der WeChat-Applet-Entwicklung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Scroll-View-Komponente des WeChat-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!