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

Tutorial zu HTML-Formular-Tags (4):

Nehmen Sie nun an, dass Sie dem Formular ein Elem...

JS Leicht verständliche Funktion und Konstruktor

Inhaltsverzeichnis 1. Übersicht 1.1 Erstellen ein...

Befehle zum Suchen der Domänen-IP-Adresse im Linux-Terminal (fünf Methoden)

In diesem Tutorial wird erklärt, wie Sie die IP-A...

Docker-Installationsschritte für Redmine

Laden Sie das Image herunter (optionaler Schritt,...

IE6 BUG und Fix ist eine vorbeugende Strategie

Originalartikel: Ultimatives IE6-Cheatsheet: So b...

JavaScript zum Erzielen eines Dropdown-Menüeffekts

Verwenden Sie Javascript, um ein Dropdown-Menü zu...

Erfahren Sie, wie Sie saubere und standardmäßige HTML-Tags schreiben

Guter HTML-Code ist die Grundlage einer schönen W...

Verschiedene Arten von MySQL-Indizes

Was ist ein Index? Ein Index ist eine Datenstrukt...

Zusammenfassung der Möglichkeiten zur Implementierung von Single Sign-On in Vue

Das Projekt wurde vor Kurzem ausgesetzt und die U...

MySQL Serie 3 Grundlagen

Inhaltsverzeichnis Tutorial-Reihe 1. Einführung i...

Implementierung des Imports und Exports von Docker-Images

Docker-Nutzung von Gitlab Gitlab Docker Startbefe...

Implementierung der CSS-Rahmenlängensteuerungsfunktion

Wenn die Rahmenlänge früher kleiner als der Conta...

Verwendung des MySQL Query Rewrite-Plugins

Plugin zum Umschreiben von Abfragen Ab MySQL 5.7....