<view class="warm-prompt">
<view class="text" style='left:{{offsetLeft}}px'>{{text}}</view>
</view>
.warm-prompt {
background-color: #FFFFFF;
height: 82rpx;
margin: 0 20rpx;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.text {
color: #4D4D4D;
white-space: nowrap;
position: absolute;
font-size: 28rpx;
}
Page({
data: {
interval: null,
pace: 1.2, //滚动速度
interval: 20, //时间间隔
size: 24, //字体大小in px
length: 0, //字体宽度
offsetLeft: 0, //
windowWidth: 0,
text: "公告 测试测试测试测试测试测试测试测试测试测试测试测试测试",
},
//根据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();
});
},
//执行跑马灯动画
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);
}
},
//停止跑马灯
stopMarquee: function () {
var that = this;
//清除旧的定时器
if (that.data != null) {
clearInterval(that.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();
});
},
onShow: {
this.startMarquee()
}
})
以上就是所有代码,可以尝试一下
如果对你有用,关注一下博主的小程序,登录一下给予支持,以后有什么开源好用的源码都会上传到小程序