Das WeChat-Applet realisiert einen mehrzeiligen Text-Scroll-Effekt

Das WeChat-Applet realisiert einen mehrzeiligen Text-Scroll-Effekt

In diesem Artikelbeispiel wird der spezifische Code für das WeChat-Applet zur Implementierung des Scrollens von mehrzeiligem Text zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

wxml

<Ansichtsklasse="vollständig" Stil="Höhe:100%;Überlauf:versteckt">
   <swiper autoplay="true" Intervall="3000" Dauer="500" kreisförmig="true" vertikal="true" Stil="Höhe:100%">
    <swiper-item wx:for="{{topnewslist}}" wx:key="{{index}}" catchtouchmove='catchTouchMove'>
     <van-notice-bar scrollable="{{false}}" bindtap="tonewsdetail" wx:for="{{item}}" wx:for-item="it" wx:key="{{index}}" data-newsid="{{it.new_id}}" style="width:100%" text="{{it.new_topic}}" />
    </swiper-item>
   </swiper>
</Ansicht>

wxss

Swiper-Element {
 Höhe: 100%;
}

js

//index.js
//Holen Sie sich die Anwendungsinstanz-Import-API aus "../../utils/api.js"
var token = ''
const app = getApp()

Seite({
 Daten: {
  Topnewsliste:[]
 },
 beim Laden: Funktion () {
 },
 tonewsdetail(e){
  var newsid=e.currentTarget.dataset.newsid;
  wx.navigateTo({
   URL: '/Seiten/Newsdetail/Newsdetail?newsid='+Newsid,
  })
 },

 lädtscrollnews(){
  api.get("mpapi/mpmnews.ashx", { Aktion:'Topliste', Token: Token}).then((res)=>{
   wenn(res.code==1){
   //res.list=[{"neue_id":1,"neues_Thema":"111"},{"neue_id":2,"neues_Thema":"222"},{"neue_id":3,"neues_Thema":"333"},{"neue_id":4,"neues_Thema":"444"}]
    dies.setData({
     topnewslist: this.splitArr(res.list, 2) //Aufruf//Nach dem Aufruf von [[{"new_id":1,"new_topic":"111"},{"new_id":2,"new_topic":"222"}],[{"new_id":3,"new_topic":"333"},{"new_id":4,"new_topic":"444"}]]
    })
   }
  })
 },
 /**
  * Array aufteilen, um ein zweidimensionales Array-Paket zu erstellen * @param Datenarray * @param senArrLen Länge des aufzuteilenden Subarrays */
 splitArr(Daten, senArrLen){
  //Verarbeite die Daten in Längengruppen let data_len = data.length;
  lass arrOuter_len = data_len % senArrLen === 0 ? data_len / senArrLen : parseInt((data_len / senArrLen) + '') + 1;
  let arrSec_len = data_len > senArrLen ? senArrLen : data_len; //Die Länge des inneren Arrays let arrOuter = new Array(arrOuter_len); //Das äußerste Array let arrOuter_index = 0; //Unterelementindex des äußeren Arrays // console.log(data_len % len);
  für (lass i = 0; i < Datenlänge; i++) {
   wenn (i % senArrLen === 0) {
    arrOuter_index++;
    lass len = arrSec_len * arrOuter_index;
    //Die Mindestlänge des inneren Arrays hängt vom Modulo der Datenlänge und -länge ab. Normalerweise wird die innerste Ebene durch die folgende Zuweisung bestimmt: arrOuter[arrOuter_index - 1] = new Array(data_len % senArrLen);
    if (arrOuter_index === arrOuter_len) //Die letzte Gruppe von data_len % senArrLen === 0 ?
      Länge = Datenlänge % senArrLen + senArrLen * arrOuter_index :
      Länge = Datenlänge % senArrLen + senArrLen * (arrOuter_index - 1);
    let arrSec_index = 0; //Der Index des Arrays der zweiten Ebene for (let k = i; k < len; k++) { //Der Anfang des Arrays der ersten Ebene hängt von der Länge des Arrays der zweiten Ebene * dem aktuellen Index der ersten Ebene ab arrOuter[arrOuter_index - 1][arrSec_index] = data[k];
     arrSec_index++;
    }
   }
  }
  Rückgabewert arrOuter
 },
 //Vertikales Gleiten abfangen catchTouchMove: function (res) {
  return false
 },
})

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 ermöglicht horizontales und vertikales Scrollen
  • WeChat-Miniprogramme ermöglichen nahtloses Scrollen

<<:  Beispiel für die Installation von nginx in einem angegebenen Verzeichnis

>>:  MySQL verwendet UNIQUE, um das Einfügen nicht doppelter Daten zu implementieren

Artikel empfehlen

Detaillierte Erläuterung der Kernkonzepte und Fälle von webpack-dev-server

Kernkonzepte von webpack-dev-server Webpacks Cont...

Mehrere Möglichkeiten, Python-Programme im Linux-Hintergrund auszuführen

1. Die erste Methode besteht darin, den Befehl un...

Über das Problem beim Schreiben von Plugins zum Mounten von DOM in vue3

Im Vergleich zu vue2 verfügt vue3 über ein zusätz...

Detaillierte Erläuterung des Vue Router Routing Guard

Inhaltsverzeichnis 1. Global vor jedem 1. Global ...

So ändern Sie MySQL, um Remoteverbindungen zuzulassen

In Bezug auf die MySQL-Remoteverbindung stoßen wi...

Prinzip der Ereignisdelegierung in JavaScript

Inhaltsverzeichnis 1. Was ist Eventdelegation? 2....

So verwenden Sie MySQL „group by“ und „order by“ gemeinsam

Angenommen, es gibt eine Tabelle: Belohnung (Belo...

Bringen Sie Ihnen bei, wie Sie die rekursive Methode von MySQL8 verwenden

Ich habe zuvor einen Artikel über rekursive Abfra...

So legen Sie Remotezugriffsberechtigungen in MySQL 8.0 fest

Im vorherigen Artikel wurde erklärt, wie man das ...

Einige gängige CSS-Layouts (Zusammenfassung)

Zusammenfassung In diesem Artikel werden die folg...

Natives JS zum Erzielen von Laufschrifteffekten

Heute werde ich Ihnen einen Laufschrifteffekt zei...

W3C Tutorial (6): W3C CSS Aktivitäten

Ein Stylesheet beschreibt, wie ein Dokument angez...

js, um einen einfachen Akkordeoneffekt zu erzielen

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