微信小程序跑马灯(真机效果一致)

效果图如下所示

图片仅供参考，录制出来卡卡的，建议复制代码试一试

.wxml

<view class="lamp">
<view class='lamp-text' style='--marqueeWidth--:{{-width_mal}}px;--speed--:{{rolltime}}s;'>
  <view style="margin-left：{{starspos}}rpx;font-size:{{font_size}}px">
    {{text}}
  </view>
</view>
</view>

.wxss

@keyframes around {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: var(--marqueeWidth--);
  }
}
.lamp{
  color: #f37b1d;
  background-color: #fde6d2;
  height: 60rpx;
  line-height: 60rpx;
}
.lamp-text {
  display: flex;
  white-space: nowrap;
  animation-name: around;
  animation-duration: var(--speed--);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.js

Page({
  data: {
    text:"CSDN:https://blog.csdn.net/qq_43764578",
    speed: 2,//滚动速度
    font_size: 14,//文字大小px
  },
  onLoad: function (options) {
    let text = this.data.text
    let speed = this.data.speed
    let font_size = this.data.font_size
    let distance = speed * font_size;
    let starspos = wx.getSystemInfoSync().windowWidth;
    let width_mal = text.length * ((font_size + 2) / 2);
    let rolltime = width_mal / distance 
    this.setData({
      width_mal: width_mal,//文字宽度
      rolltime: rolltime,//滚动时间
      starspos: starspos,//以取屏幕宽度为间距
    })
  },
})

对你有帮助的话记得收藏点赞，有什么问题欢迎评论留言。