Widget Word Horselight Effect

Time:2019-5-24

In this paper, we share the specific code of the effect of the small program text horse-running lamp for your reference. The specific content is as follows.

market.wxml

<!--pages/market/market.wxml-->
< View > 1 is displayed before </view >
<view> 
 <view>
 <view style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
 {{text}}
 </view>
 </view> 
</view>
 
< View > 2 shows </view > when white edge appears.
<view>
 <view>
 <view 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>
 </view>
</view>

market.wxss


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

js:

Page({
 
 data: {
 
 Text:'This is a text running lamp that scrolls back and forth, haha ha ha ha ha ha ha'.
 MarqueePace: 1, // Rolling Speed 
 MarqueeDistance: 0, // Initial rolling distance
 marqueeDistance2: 0, 
 marquee2copy_status: false, 
 marquee2_margin: 60, 
 size: 14,
 Orientation:'left', // rolling direction
 Interval: 20//time interval
 
 },
 
 onShow: function () {
 // Page display
 var vm = this; 
 Var length = vm. data. text. length * vm. data. size; // text length
 Var windowWidth = wx. getSystem InfoSync (). windowWidth; //screen width
 vm.setData({
 length: length, 
 windowWidth: windowWidth,
 Marquee2_margin: length < windows width? Windows width - length: vm. data. marquee2_margin/// When text length is less than screen length, additional white space is needed
 });
 
 Vm. Run1 (); // Horizontal line scrolls and then scrolls in the same direction
 Vm. run2 (); // / The first word disappears and immediately appears on the right.
 
 },
 
 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.windowWidth
 });
 vm.run1();
 
 }
 }, vm.data.interval);
 },
 
 run2: function () { 
 var vm = this;
 var interval = setInterval(function () {
 if (-vm.data.marqueeDistance2 < vm.data.length) {
 // If the text scrolls to the white edge where marquee2_margin = 30px appears, it is then displayed 
 vm.setData({ 
  marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace,
  marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin,
 });
 } else {
 If (- vm. data. marqueeDistance 2 >= vm. data. marquee2_margin) {/// When the second word scrolls to the leftmost side 
  vm.setData({
  MarqueeDistance 2: vm. data. marquee2_margin// scroll directly
  });
 
  clearInterval(interval);
  vm.run2();
 } else {
 
  clearInterval(interval);
  vm.setData({
  marqueeDistance2: -vm.data.windowWidth
  });
  vm.run2();
 }
 }
 }, vm.data.interval);
 }
})

Design sketch:

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.