WeChat applet achieves the text running lamp effect, and Applet text running lamp

The small program achieves the text running lamp effect, and the small program text running lamp

This article provides examples to share with you the specific code of the small program to implement the text marquee for your reference. The specific content is as follows:

Effect

 

Wxml

<View> 1. display it again </view> <view class = "example"> <view class = "marquee_box"> <view class = "marquee_text" style = "{ {orientation }}: {marqueeDistance} px; font-size: {size} px; ">{{ text }}</view> <view> 2 is displayed after a white edge appears </view> <view class =" example "> <view class = "marquee_box"> <view class = "marquee_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> </view>

Wxss

.example { display: block; width: 100%; height: 100rpx;}.marquee_box { width: 100%; position: relative;}.marquee_text { white-space: nowrap; position: absolute; top: 0;}

Js

// Pages/home/marquee. jsPage ({data: {text: 'This is a rolling text running lantern, hahahahahahahahahaha', marqueePace: 1, // rolling speed marqueeDistance: 0, // The initial rolling distance is marqueeDistance2: 0, marquee2copy_status: false, marquee2_margin: 60, size: 14, orientation: 'left', // interval: 20 // time interval }, onShow: function () {// The page displays var vm = this; var length = vm. data. text. length * vm. data. size; // text length var 1_wwidth = wx. getSystemInfo Sync (). interval wwidth; // screen width vm. setData ({length: length, interval wwidth: interval wwidth, marquee2_margin: length <interval wwidth? Required wwidth-length: vm. data. marquee2_margin // when the text length is smaller than the screen length, add a whitelist}); vm. run1 (); // scroll the vm in the original direction after a horizontal row of words is finished. run2 (); // immediately appears from the right after the first word disappears}, run1: function () {var vm = this; var interval = setInterval (function () {if (-vm. data. marqueeDistance <vm. data. length) {vm. setData ({marqueeDistance: vm. data. marqueeDistance-vm. data. marqueePace,});} else {clearInterval (interval); vm. setData ({marqueeDistance: vm. data. required wwidth}); vm. run1 () ;}}, vm. data. interval) ;}, run2: function () {var vm = this; var interval = setInterval (function () {if (-vm. data. marqueeDistance2 <vm. data. length) {// if the text is scrolled to the white edge with marquee2_margin = 30px, the vm is displayed. setData ({marqueeDistance2: vm. data. marqueeDistance2-vm. data. marqueePace, marquee2copy_status: vm. data. length + vm. data. marqueeDistance2 <= vm. data. required wwidth + vm. data. marquee2_margin,});} else {if (-vm. data. marqueeDistance2> = vm. data. marquee2_margin) {// vm when the second text is scrolled to the leftmost. setData ({marqueeDistance2: vm. data. marquee2_margin // directly scroll back}); clearInterval (interval); vm. run2 ();} else {clearInterval (interval); vm. setData ({marqueeDistance2:-vm. data. required wwidth}); vm. run2 () ;}}, vm. data. interval );}})

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.