Running horselight effect is more common, generally do small programs of e-commerce class, will use, so the code today specially write an article, to teach you, how to achieve horselight effect, the following is the code to achieve the effect, you can have a look!

The production of running lantern effect

The production method is very simple, first on the code, the code will be explained in detail later

First, WXML interface implementation

<! <view class="example">
      <view class="marquee_box">
        <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px; font-size: {{size}}px;">
          <image src="{{adUrl}}" class='ad-image' />{{text}}
        </view>
      </view>
    </view>
Copy the code

The interface layout is very simple, a bottom background container, adding a broadcast picture and the corresponding running light text

Second, WXSS style

.example {
  display: block;
  width: 100%;
  height: 70rpx;
  background-color: #f2f2f2;
  line-height: 70rpx;
}

.marquee_box {
  width: 100%;
  position: relative;
}

.marquee_text {
  white-space: nowrap;
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: row;
}

.ad-image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
  margin-top: 15rpx;
}
Copy the code

That’s it. Here’s the code to take you through the tutorial

  1. How do I set the CSS style for centered text? Simply set the height property to the same height as line-height

  2. The display properties

    • None: This element will not be displayed
    • Block: Two elements wrap automatically
    • Inline: Two elements are close together
    • Inherit: Inherits the parent class
    • Flex: Multiple columns, multiple columns

Third, XXX. Js

Page({
  data: {
     text: '51 Tao Zhen Goods, a shopping platform to save money ', marqueeDistance: 0,// Initial rolling distance size: 14, orientation:'left',// Scroll direction interval: 20, // time interval adUrl:'.. /.. /images/ic_home_msg.png',
  },
  onShow: functionVar that = this; var length = that.data.text.length * that.data.size; Var windowWidth = wx.getSystemInfoSync().windowWidth; SetData ({length: length, windowWidth: windowWidth,}); that.runMarquee(); }, runMarquee:function () {
    var that = this;
    var interval = setInterval(function() {// Move the text to the endif (-that.data.marqueeDistance < that.data.length) {
        that.setData({
          marqueeDistance: that.data.marqueeDistance - that.data.marqueePace,
        });
      } else{ clearInterval(interval); that.setData({ marqueeDistance: that.data.windowWidth }); that.runMarquee(); } }, that.data.interval); }})Copy the code

Js needs to explain more inside

1. How to use the setInterval timer?

setInterval(function(){
console.log("interval")
},1000)
Copy the code

Like normal timers, setInterval needs to pass in two parameters, one is the callback method, and the other is how often it is executed. In this project, we use the field parameter interval, whose value is set to 20

2. Settimeout and setInterval () are both apis provided by Tencent. Are there any differences between them?

  • Settimeout executes a function once in a while. The scenario is that we might want a task to be executed after a certain amount of time
  • The etInterval () function is executed at intervals, that is, in a loop, and can be stopped using clearInterval

3. Realization principle of running lantern

  • The first step: calculate the length of running lantern text
  • Step 2: Every once in a while, move a little distance to create movement
  • Step 3: When you remove the screen, reset the distance of the lantern to the width of the screen, and then you can continue the cycle of step 1
  • According to the code, the reader can check the code one by one. The code logic in the method function runMarquee is to perform the above three steps, which I will not explain here

conclusion

The above is the whole process of running lantern effect, the principle is not very difficult, a timer, easy to achieve, if you want to learn more tutorials, pay attention to the “code concentration camp” public account for the latest tutorial