网上很多实现跑马灯的文章，但是很多发现都是不行的，之一就是文字宽度居然是通过字符数*文字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();
});
}
})
源码下载：跑马灯效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
网友评论