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

版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/panzina/article/details/83073573

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

一.效果图

1.

2.

二.代码

1.lamp.wxml

<view class="box">
  <text style='left:{{distance}}px;font-size:{{size}}px'>{{text}}</text>
</view>

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.当移出屏幕，重置跑马灯距离为屏幕距离。再次调用函数，继续循环执行

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