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

Detaillierte Erläuterung der ersten Erfahrungen mit Vue3.0 + TypeScript + Vite

Inhaltsverzeichnis Projekterstellung Projektstruk...

Implementierung der mobilen Postcss-pxtorem-Anpassung

Führen Sie den Befehl aus, um das Plugin postcss-...

Mysql Sql-Anweisungsübungen (50 Fragen)

Tabellenname und Felder –1. Studentenliste Studen...

Detaillierte Erläuterung gängiger MySQL-Befehle im Linux-Terminal

Aufschlag: # chkconfig --list Alle Systemdienste ...

Acht Hook-Funktionen in der Vue-Lebenszykluskamera

Inhaltsverzeichnis 1. beforeCreate und erstellte ...

Installation und Verwendung der MySQL MyCat-Middleware

1. Was ist mycat Ein vollständig Open Source-Groß...

React + ts realisiert den sekundären Verknüpfungseffekt

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

Was bei der Migration von MySQL auf 8.0 zu beachten ist (Zusammenfassung)

Passwortmodus PDO::__construct(): Der Server hat ...