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    

Artikel empfehlen

Beispielcode zur Implementierung von dynamischem Skinning mit vue+element

Manchmal kann das Thema eines Projekts nicht jede...

Eine kurze Erläuterung des Sperrbereichs der MySQL-Next-Key-Sperre

Vorwort Eines Tages wurde ich plötzlich nach der ...

MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Win10

Super ausführliches Tutorial zur Installation und...

Vor- und Nachteile gängiger MySQL-Speicher-Engines

Inhaltsverzeichnis Alle Speicher-Engines anzeigen...

Analyse von Mysql-Datenmigrationsmethoden und -Tools

In diesem Artikel wird hauptsächlich die Analyse ...

Problemlösungsvorgänge für Alpine Docker-Bildschriftarten

1. Führen Sie Schriftarten aus, öffnen Sie den Sc...

Detaillierte Beispiele zur Float-Verwendung in HTML/CSS

1. Grundlegende Anwendungsbeispiele für Float 1. ...

Mehrere Möglichkeiten zum Einfügen von SVG in HTML-Seiten

SVG (Scalable Vector Graphics) ist ein Bildformat...

Webpack lädt CSS-Dateien und ihre Konfigurationsmethode

webpack lädt CSS-Dateien und deren Konfiguration ...