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

Vue verwendet E-Charts, um ein Organigramm zu zeichnen

Gestern habe ich einen Blog über den kreisförmige...

Zusammenfassung der Lösungen für allgemeine Linux-Probleme

1. Centos7 unter VMware verbinden und eine feste ...

Vue + SSM realisiert den Vorschaueffekt beim Hochladen von Bildern

Die aktuelle Anforderung lautet: Es gibt eine Sch...

WeChat-Applet-Picker - Mehrspalten-Selektor (Modus = MultiSelector)

Inhaltsverzeichnis 1. Wirkungsdiagramm (mehrere S...

js implementiert das Popup-Anmeldefeld durch Klicken auf das Popup-Fenster

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

Detaillierte Erklärung zum CSS-Randkollaps

Vorherige Das ist eine klassische alte Frage. Da ...

So installieren Sie JDK und Mysql auf dem Linux-System Ubuntu 18.04

Plattformbereitstellung 1. JDK installieren Schri...

Beispielcode zur Implementierung transparenter Verlaufseffekte mit CSS

Die Titelbilder in den Spalten von Zhihu Discover...

Detaillierte Schritte zur Dateisteuerungsverwaltung für Linux-Konten

Im Linux-System gibt es neben den verschiedenen, ...