微信小程序之跑马灯效果(单条数据)

爱被打了一巴掌 2022-12-05 15:20 160阅读 0赞

**wxml**

**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;
    }

**js**

Page({
        
      data: {
        
        text: '啊哈哈哈，我是跑马灯啦啦啦~啊哈哈哈，我是跑马灯啦啦啦~啊哈哈哈，我是跑马灯啦啦啦~啊哈哈哈，我是跑马灯啦啦啦~',
        //初始滚动距离(这里是屏幕宽度)
        distance: wx.getSystemInfoSync().windowWidth,
        //时间间隔
        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);
      }
    })