【微信小程式】怎麼寫小程式文字跑馬燈效果？小程式文字滾動？

wxml

<view class="example xingentimesd">
    <view class="marquee_box">
       <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
          {{text}}
       </view>
    </view>
</view>
           

wxss

.xingentimesd{
  font-size: 24rpx;
  color: #2397f9;
  letter-spacing: 2rpx;
  text-align: center;
  background: #e6f7ff;
}
.example {
  display: block;
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
}

.marquee_box {
  width: 100%;
  position: relative;
}

.marquee_text {
  white-space: nowrap;
  position: absolute;
  top: 0;
}
           

備注：布局的時候需要注意的必須給滾動文字的父盒子添加position:absolute,否則就實作不了動态效果。謹記！！！

接着就該編寫JS來實作文字跑馬燈的效果啦！

思路：

1. 聲明變量
2. 使用我們之前變量來擷取到我們所需要用到的值
3. 通過this.setData來實作效果

data:{
    text: '時間：01月25日13時25分-01月25日13時50分',
    marqueePace: 3,//滾動速度
    marqueeDistance: 0,//初始滾動距離
    marqueeDistance2: 0,
    marquee2copy_status: false,
    marquee2_margin: 60,
    size: 14,
    orientation: 'left',//滾動方向
    interval: 60 // 時間間隔    
},
onShow: function () {
    var tm = this;
    var length = tm.data.text.length * tm.data.size;//文字長度
    var windowWidth = wx.getSystemInfoSync().windowWidth;// 螢幕寬度
    tm.setData({
        length: length,
        windowWidth: windowWidth,
        marquee2_margin: length < windowWidth ? windowWidth - length : tm.data.marquee2_margin//當文字長度小于螢幕長度時，需要增加補白
    });
    tm.run1();// 水準一行字滾動完了再按照原來的方向滾動

},
run1: function () {
  var tm = this;
  var interval = setInterval(function () {
    if (-tm.data.marqueeDistance < tm.data.length) {
      tm.setData({
        marqueeDistance: tm.data.marqueeDistance - tm.data.marqueePace,
      });
    } else {
      clearInterval(interval);
      tm.setData({
        marqueeDistance: tm.data.windowWidth
      });
      tm.run1();
    }
  }, tm.data.interval);
},
           

至此，小程式跑馬燈編寫完畢。點選預覽掃碼就可以在手機上面來檢視文字跑哪等效果了。下章節更新web端的文字滾動效果，盡情期待！