微信小程序实现跑马灯效果
楠之枫雪 人气:1网上很多实现跑马灯的文章，但是很多发现都是不行的，之一就是文字宽度居然是通过字符数*文字size计算，明显是不准确的计算方式。我看了下，发现可以通过计算控件宽度来精确计算文字宽度，这样实现的跑马灯是比较完善的。
效果如下：
实现代码如下：
wxml:
<view class="rollCon">
<view class='box'>
<view class='text'style='left:{{offsetLeft}}px' >{{text}}</view>
</view>
</view>
wxss:
.rollCon {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60rpx;
z-index: 100;
background: #fde8c7;
font-size: 20rpx;
line-height: 60rpx;
}
.box {
width: 100%;
position: relative;
}
.text {
white-space: nowrap;
position: absolute;
top: 0;
font-size: 24px;
}
js:
Page({
/**
* 页面的初始数据
*/
data: {
interval: null,
text: '995年JavaScript诞生时如早一年',
pace: 1.2, //滚动速度
interval: 20, //时间间隔
size: 24, //字体大小in px
length: 0, //字体宽度
offsetLeft: 0, //
windowWidth: 0,
},
//根据viewId查询view的宽度
queryViewWidth: function(viewId) {
//创建节点选择器
return new Promise(function(resolve) {
var query = wx.createSelectorQuery();
var that = this;
query.select('.' + viewId).boundingClientRect(function(rect) {
resolve(rect.width);
}).exec();
});
},
//停止跑马灯
stopMarquee: function() {
var that = this;
//清除旧的定时器
if (that.data != null) {
clearInterval(that.interval);
}
},
//执行跑马灯动画
excuseAnimation: function() {
var that = this;
if (that.data.length > that.data.windowWidth) {
//设置循环
let interval = setInterval(function() {
if (that.data.offsetLeft <= 0) {
if (that.data.offsetLeft >= -that.data.length) {
that.setData({
offsetLeft: that.data.offsetLeft - that.data.pace,
})
} else {
that.setData({
offsetLeft: that.data.windowWidth,
})
}
} else {
that.setData({
offsetLeft: that.data.offsetLeft - that.data.pace,
})
}
}, that.data.interval);
}
},
//开始跑马灯
startMarquee: function() {
var that = this;
that.stopMarquee();
//初始化数据
that.data.windowWidth = wx.getSystemInfoSync().windowWidth;
that.queryViewWidth('text').then(function(resolve) {
that.data.length = resolve;
console.log(that.data.length + "/" + that.data.windowWidth);
that.excuseAnimation();
});
}
})
源码下载：跑马灯效果
加载全部内容