7.微信小程序之跑马灯效果

Love The Way You Lie 2022-05-09 13:34 801阅读 0赞

跑马灯效果，简单粗暴来说就是：一行文字水平向左滚动，滚动完了之后，从屏幕右侧出现，继续滚动，一般做电商类的小程序都会用到。原理不难，一个定时器，小程序自带API中 setInterval 即可完成。

# **一.效果图** #

1.![70][]

2.![70 1][]

# 二.代码 #

## 1.lamp.wxml ##

## 2.lamp.wxss ##

.box{
      width: 100%;
      height: 75rpx;
      line-height: 75rpx;
      background: #eee;
      position: relative;
    }
    .box text{
      font-size: 32rpx;
      position: absolute;
      top: 0;
      white-space: nowrap;
    }

## 3.lamp.js ##

// pages/lamp2/lamp2.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        text:'啊哈哈哈，我是跑马灯啦啦啦~',
        //初始滚动距离
        distance:0,
        //时间间隔
        interver:30,
        //滚动速度
        pace:1,
        size:14
    
      },
    
      onShow: function () {
        //获取文字长度
        var length = this.data.text.length*this.data.size;
        //获取屏幕宽度
        var windowWidth = wx.getSystemInfoSync().windowWidth;
        this.setData({
          length:length,
          windowWidth:windowWidth
        });
        //水平一行文字向左滚动，滚动完了从屏幕右侧出现，继续滚动
        this.run();
      },
    
      run:function(){
        var that = this;
        var interver = setInterval(function(){
          //文字一直移动到末尾
          if (-that.data.distance < that.data.length) {
            that.setData({
              distance: that.data.distance - that.data.pace
            });
          } else {
            clearInterval(interver);
            that.setData({
              distance: that.data.windowWidth
            });
            that.run();
          }
        }, that.data.interver);
      }
    })

# 三.跑马灯实现原理 #

1.计算文字长度

2.每隔一段时间移动一点距离，产生移动

3.当移出屏幕，重置跑马灯距离为屏幕距离。再次调用函数，继续循环执行

啦啦啦啦，完成(\*^▽^\*)

[70]: /images/20220506/08f6ac700f2d45e89a06e151c96b096a.png
[70 1]: /images/20220506/64bf161a65f84181a5c195dcdc7bd195.png