微信小程序之跑马灯效果(单条数据)-蒲公英云

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

wxml

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

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

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