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 ↓

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
bindscroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

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!