微信小程序跑馬燈(真機效果一致)

效果圖如下所示

圖片僅供參考，錄製出來卡卡的，建議複製代碼試一試

.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,//以取屏幕寬度爲間距
    })
  },
})

對你有幫助的話記得收藏點贊，有什麼問題歡迎評論留言。