<view class='loop-text'>
<view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
{{text}}
</view>
</view>
.loop-text {
width: 100%;
height: 100%;
color: #fdd100;
padding: 4%;
position: relative;
background: rgba(255, 139, 0, 1);
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 127, 255, 0.24);
}
.marquee_text {
white-space: nowrap;
position: absolute;
top: 12rpx;
font-size: 28rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 36rpx;
}
data: {
text: '这是一条会滚动的文字滚来滚去的文字跑马灯,哈哈哈哈哈哈哈哈',
marqueePace: .5,
marqueeDistance: 0,
marqueeDistance2: 0,
marquee2copy_status: false,
marquee2_margin: 60,
size: 14,
orientation: 'left',
interval: 20
},
run: function () {
let t = this;
let interval = setInterval(function () {
if (-t.data.marqueeDistance < t.data.length) {
t.setData({
marqueeDistance: t.data.marqueeDistance - t.data.marqueePace,
});
} else {
clearInterval(interval);
t.setData({
marqueeDistance: t.data.windowWidth
});
t.run();
}
}, t.data.interval);
},
startRun() {
let t = this;
let length = t.data.text.length * t.data.size;
let windowWidth = wx.getSystemInfoSync().windowWidth;
t.setData({
length: length,
windowWidth: windowWidth,
marquee2_margin: length < windowWidth ? windowWidth - length : t.data.marquee2_margin
});
t.run();
},
onShow: function () {
let t = this;
t.startRun()
},