微信小程序如何實(shí)現(xiàn)簡(jiǎn)單跑馬燈

<!-- 跑馬燈效果 -->
 <view class="example">
 <view class="marquee_box">
 <view class="marquee_text" >
  <image src="{{adUrl}}" class='ad-image' />{{text}}
 </view>
 </view>
 </view>

.example {
 display: block;
 width: 100%;
 height: 70rpx;
 background-color: #f2f2f2;
 line-height: 70rpx;
}

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

.marquee_text {
 white-space: nowrap;
 position: absolute;
 top: 0;
 display: flex;
 flex-direction: row;
}

.ad-image {
 width: 40rpx;
 height: 40rpx;
 margin-right: 10rpx;
 margin-top: 15rpx;
}

Page({
 data: {
 text: '51淘甄貨,一個(gè)可以省錢(qián)的購(gòu)物平臺(tái)',
 marqueePace: 1,//滾動(dòng)速度
 marqueeDistance: 0,//初始滾動(dòng)距離
 size: 14,
 orientation: 'left',//滾動(dòng)方向
 interval: 20, // 時(shí)間間隔
 adUrl: '../../images/ic_home_msg.png',
 },
 onShow: function () {
 // 頁(yè)面顯示
 var that = this;
 var length = that.data.text.length * that.data.size;//文字長(zhǎng)度
 var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕寬度
 that.setData({
 length: length,
 windowWidth: windowWidth,
 });
 that.runMarquee();// 水平一行字滾動(dòng)完了再按照原來(lái)的方向滾動(dòng)
 },
 runMarquee: function () {
 var that = this;
 var interval = setInterval(function () {
 //文字一直移動(dòng)到末端
 if (-that.data.marqueeDistance < that.data.length) {
 that.setData({
  marqueeDistance: that.data.marqueeDistance - that.data.marqueePace,
 });
 } else {
 clearInterval(interval);
 that.setData({
  marqueeDistance: that.data.windowWidth
 });
 that.runMarquee();
 }
 }, that.data.interval);
 }
})

setInterval(function(){
console.log("interval")
},1000)