Heim > Artikel > WeChat-Applet > 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
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!