微信小程序跑马灯

话不多说先上展示效果

接着上源码

<view class="trumpet"
	<image src="/pages/res/icon-trumpet.png" class='noticeImg' />
	<view class="example">
		<view class="marquee_box">
			<view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
				{{text}}
			</view>
		</view>
	</view>
</view>

.trumpet {
    margin: 0 30rpx 30rpx;
    background: #F6F7F9;
    border-radius: 40rpx;
    padding: 10rpx 20rpx 10rpx 60rpx;
    display: flex;
    align-items: center;
    height: 60rpx;
}

.noticeImg {
    width: 28rpx;
    height: 24rpx;
    margin-left: -30rpx;
}

.trumpet .marquee_box image {
    width: 28rpx;
    height: 24rpx;
    position: absolute;
    top: 5rpx;
    left: -40rpx;
}

.example {
    display: block;
    width: 100%;
    height: 60rpx;
    line-height: 60rpx;
    overflow: hidden;
}

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

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

}

data:{
	text: '这是一条会滚动的文字滚来滚去的文字跑马灯，哈哈哈哈哈哈哈哈',
    marqueePace:2, //滚动速度 
    marqueeDistance: 0, //初始滚动距离
    marqueeDistance2: 0,
    marquee2copy_status: false,
    marquee2_margin: 60,
    size: 14,
    orientation: 'left', //滚动方向
    interval: 20, // 时间间隔
},

onShow: function () {
    // 跑马灯效果
    var length = that.data.text.length * that.data.size; //文字长度
    var windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕宽度
    that.setData({
        length: length,
        windowWidth: windowWidth,
        marquee2_margin: length < windowWidth ? windowWidth - length : that.data.marquee2_margin //当文字长度小于屏幕长度时，需要增加补白
    });
    that.run(); // 水平一行字滚动完了再按照原来的方向滚动
},
run: function () {
    var interval = setInterval(function () {
        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.run();
        }
    }, that.data.interval)
},

参考文献 跑马灯，如有侵权望告知删除