wxml
<view class="box">
<text style='left:{{distance}}px;font-size:{{size}}px'>{{text}}</text>
</view>
wxss
.box{
width: 100%;
height: 75rpx;
line-height: 75rpx;
background: #eee;
position: relative;
}
.box text{
font-size: 32rpx;
position: absolute;
top: 0;
white-space: nowrap;
}
js
Page({
data: {
text: '啊哈哈哈,我是跑马灯啦啦啦~啊哈哈哈,我是跑马灯啦啦啦~啊哈哈哈,我是跑马灯啦啦啦~啊哈哈哈,我是跑马灯啦啦啦~',
//初始滚动距离(这里是屏幕宽度)
distance: wx.getSystemInfoSync().windowWidth,
//时间间隔
interver: 30,
//滚动速度
pace: 1,
//字体大小
size: 14
},
onShow: function () {
//获取文字长度
var length = this.data.text.length * this.data.size;
//获取屏幕宽度
var windowWidth = wx.getSystemInfoSync().windowWidth;
this.setData({
length: length,
windowWidth: windowWidth
});
//水平一行文字向左滚动,滚动完了从屏幕右侧出现,继续滚动
this.run();
},
run: function () {
var that = this;
var interver = setInterval(function () {
//文字一直移动到末尾
if (-that.data.distance < that.data.length) {
that.setData({
distance: that.data.distance - that.data.pace
});
} else {
clearInterval(interver);
that.setData({
distance: that.data.windowWidth
});
that.run();
}
}, that.data.interver);
}
})