Das WeChat-Applet ermöglicht horizontales und vertikales Scrollen

Das WeChat-Applet ermöglicht horizontales und vertikales Scrollen

In diesem Artikelbeispiel wird der spezifische Code für das WeChat-Applet zum horizontalen und vertikalen Scrollen als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Wichtige Punkte Swiper interner Satz Scroll-Ansicht

Beachten:

1. Die vertikale Scrollhöhe kann nicht in Prozent, sondern in px/rpx angegeben werden
2. Die interne Artikelposition des Swipers beträgt 100 %
3. Die Swiper-Höhe muss mit einem Wert versehen werden
4. Wenn Sie horizontal scrollen, müssen Sie auch die horizontale Breite angeben

Code

xml

<swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
 <swiper-item class="tab-content">
 <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}">
  <Ansichtsklasse="forts">
  <Ansichtsklasse="jira-card" wx:für="{{jiraArray}}" wx:für-index="idx" wx:für-item="itemJira" wx:key="idx">
  <Karte itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></Karte>
  </Ansicht>
  </Ansicht>
 </scroll-ansicht>

 </swiper-item>
 <swiper-item class="tab-content">
 <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}">
  <Ansichtsklasse="forts">
  <Ansichtsklasse="jira-card" wx:für="{{jiraArray}}" wx:für-index="idx" wx:für-item="itemJira" wx:key="idx">
  <Karte itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></Karte>
  </Ansicht>
  </Ansicht>
 </scroll-ansicht>
 </swiper-item>
 </swiper>

<swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
 <swiper-item class="tab-content">
 <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}">
  <Ansichtsklasse="forts">
  <Ansichtsklasse="jira-card" wx:für="{{jiraArray}}" wx:für-index="idx" wx:für-item="itemJira" wx:key="idx">
  <Karte itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></Karte>
  </Ansicht>
  </Ansicht>
 </scroll-ansicht>

 </swiper-item>
 <swiper-item class="tab-content">
 <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}">
  <Ansichtsklasse="forts">
  <Ansichtsklasse="jira-card" wx:für="{{jiraArray}}" wx:für-index="idx" wx:für-item="itemJira" wx:key="idx">
  <Karte itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></Karte>
  </Ansicht>
  </Ansicht>
 </scroll-ansicht>
 </swiper-item>
</swiper>

wxss

.tab-box{
 Höhe: 1040rpx;
}
.scroll-höhe {
Höhe: 1040rpx;
}

js

meinAudit(){
 dies.setData({
 aktuellerTab:0,
 })
},
meinInitiate(){
 dies.setData({
 aktuellerTab:1,
 // jiraArray:[]
 })
},
switchTab(Ereignis){
 var cur = Ereignis.Detail.aktuell;
 var singleNavWidth = this.data.windowWidth / 5;
 dies.setData({
 currentTab: aktuell,
 navScrollLeft: (aktuell - 2) * singleNavWidth
 });
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der versteckten Bildlaufleiste im WeChat-Applet
  • So implementieren Sie Scroll-Penetration und verhindern das Scrollen in der Scroll-Ansicht des WeChat-Applets
  • Detaillierte Erläuterung der praktischen Fallstricke beim horizontalen Scrollen in der Scroll-Ansicht des WeChat-Applets und der Implementierung des Ausblendens der Bildlaufleiste
  • Scrollbarer Navigationseffekt oben im WeChat-Applet
  • Die Scroll-View-Komponente des WeChat-Applets implementiert eine Scroll-Animation
  • WeChat-Applet-Beispielcode für die Benachrichtigung über scrollende Nachrichten
  • Scroll-Tab des WeChat-Applets zum Umschalten nach links und rechts
  • Das WeChat-Applet implementiert das Scrollen von Text
  • Das WeChat-Applet realisiert einen mehrzeiligen Text-Scroll-Effekt
  • WeChat-Miniprogramme ermöglichen nahtloses Scrollen

<<:  Beispielcode für die Codevorlage für die Linux C-Protokollausgabe

>>:  Lösen Sie schnell das Problem, dass der mysql57-Dienst plötzlich verschwunden ist

Artikel empfehlen

Schritte zum Kapseln der Karussellkomponente in vue3.0

Inhaltsverzeichnis 1: Kapselungsidee 2. Verpackun...

Bild-Tag für HTML-Webseite

Bild-Tag <IMG> einfügen Die farbenfrohen Web...

Implementierung der MySQL-Konfiguration SSL-Zertifikat-Login

Inhaltsverzeichnis Vorwort 1. MySQL ermöglicht SS...

So verhindern Sie Event-Bubbling in JavaScript

Wir müssen darauf achten, dass die Eigenschaften ...

Zusammenfassung zur Verwendung von MySQL-Isolationsspalten und Präfixindizes

Inhaltsverzeichnis Datenspalten isolieren Präfixi...

JavaScript zum Erzielen eines Kalendereffekts

In diesem Artikel wird der spezifische Code für J...

So binden Sie einen Docker-Container an eine externe IP und einen externen Port

Docker ermöglicht die Bereitstellung von Netzwerk...

Ubuntu 19.10 aktiviert SSH-Dienst (detaillierter Prozess)

Ich habe mehr als eine Stunde gebraucht, um SSH i...

11 Möglichkeiten, Duplikate aus JS-Arrays zu entfernen

Bei der tatsächlichen Arbeit oder bei Interviews ...

Detaillierte Erklärung des strikten Modus in JavaScript

Inhaltsverzeichnis Einführung Verwenden des strik...

So kompilieren und installieren Sie xdebug in einer Ubuntu-Umgebung

Dieser Artikel beschreibt, wie xdebug in einer Ub...

Regeln für die Gestaltung des Anmeldeformulars

Ich habe „Patterns for Sign Up & Ramp Up“ vor ...

Beispiel für die Implementierung einer Komponente mit fester Unterseite in Vue

Inhaltsverzeichnis 【Wirkung】 【Implementierungsmet...

Beispielcode des Spread-Operators und seiner Anwendung in JavaScript

Der Spread-Operator ermöglicht die Erweiterung ei...