In diesem Artikelbeispiel wird der spezifische Code für das WeChat-Applet zur Implementierung des Text-Scrollens zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt wxml: <view>Nach der Anzeige erneut anzeigen:</view> <Klasse anzeigen="Beispiel"> <Klasse anzeigen="Box"> <view class="text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;"> {{Text}} </Ansicht> </Ansicht> </Ansicht> <view>Wenn der weiße Rand erscheint, wird Folgendes angezeigt:</view> <Klasse anzeigen="Beispiel"> <Klasse anzeigen="Box"> <view class="text" style="{{orientation}}:{{marqueeDistance2}}px;font-size: {{size}}px;"> <text>{{text}}</text> <text wx:if="{{marquee2copy_status}}" style="margin-left:{{marquee2_margin}}px;">{{text}}</text> </Ansicht> </Ansicht> </Ansicht> wxss: .Beispiel { Anzeige: Block; Breite: 100 %; Höhe: 100rpx; } .Kasten { Breite: 100 %; Position: relativ; } .text { Leerzeichen: Nowrap; Position: absolut; oben: 0; } javascript - Argumente: Seite({ Daten: { Text: 'Lauftext 1234567890abcdefghijklmnopqrstuvmxyz', marqueePace: 1, //Scrollgeschwindigkeit marqueeDistance: 0, //Anfängliche Scrolldistanz marqueeDistance2: 0, marquee2copy_status: falsch, marquee2_margin: 60, Größe: 14, Ausrichtung: 'links', // Scrollrichtungsintervall: 20 // Zeitintervall}, onShow: Funktion() { // Seitenanzeige var vm = this; var Länge = vm.data.text.length * vm.data.size; //Textlänge var Fensterbreite = wx.getSystemInfoSync().Fensterbreite; //Bildschirmbreite vm.setData({ Länge: Länge, Fensterbreite: Fensterbreite, marquee2_margin: Länge < Fensterbreite? Fensterbreite – Länge: vm.data.marquee2_margin //Wenn die Textlänge kürzer als die Bildschirmlänge ist, muss eine Polsterung hinzugefügt werden}); vm.run1(); //Nachdem eine horizontale Zeile mit Wörtern gescrollt wurde, scrollen Sie in die ursprüngliche Richtung vm.run2(); //Das erste Wort verschwindet und erscheint dann sofort von rechts }, run1: Funktion() { var vm = dies; var Intervall = setzeIntervall(Funktion() { wenn (-vm.data.marqueeDistance < vm.data.length) { vm.setData({ MarqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace, }); } anders { clearInterval(Intervall); vm.setData({ LaufschriftDistanz: vm.data.windowWidth }); vm.run1(); } }, vm.data.interval); }, run2: Funktion() { var vm = dies; var Intervall = setzeIntervall(Funktion() { wenn (-vm.data.marqueeDistance2 < vm.data.length) { // Wenn der Text bis zum weißen Rand von marquee2_margin=30px scrollt, dann zeige vm.setData({ marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace, marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin, }); } anders { if (-vm.data.marqueeDistance2 >= vm.data.marquee2_margin) { // Wenn der zweite Text ganz nach links scrollt vm.setData({ marqueeDistance2: vm.data.marquee2_margin // direkt erneut rollen }); clearInterval(Intervall); vm.run2(); } anders { clearInterval(Intervall); vm.setData({ MarqueeDistance2: -vm.data.windowWidth }); vm.run2(); } } }, vm.data.interval); } }) 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:
|
<<: So zeigen Sie allgemeine Symbole auf dem Desktop in Windows Server 2012 an oder verbergen sie
>>: my.cnf-Parameterkonfiguration zur Optimierung der InnoDB-Engine-Leistung
Die Centos8-Distribution wird über die BaseOS- un...
1. Was sind die Vorlagen für ASP.NET-Webanwendunge...
Kurzbeschreibung Passend für Leser: Mobile Entwic...
Standortausdruckstyp ~ bedeutet, dass ein regulär...
Ist es der unten gezeigte Effekt? Wenn ja, lesen ...
Inhaltsverzeichnis brauchen Kernidee Zwei Möglich...
Drei Möglichkeiten zum Festlegen von Rahmen in HT...
Inhaltsverzeichnis Transaktionsisolationsebene Be...
1. Zuerst wird beim Verknüpfen von Git eine Fehle...
AWS – Amazons Cloud-Computing-Serviceplattform Ic...
1. Einleitung Zuvor haben wir die schnelle Entwic...
Inhaltsverzeichnis Überblick Globale Hook-Funktio...
Inhaltsverzeichnis Überblick Erste Schritte mit D...
Lassen Sie mich zunächst die Anwendungsmethode er...
Float wird häufig im Layout von Webseiten verwend...