wxml:
<view class='v1' >
<view class='t' animation="{{animationData}}">
{{text}}
</view></view>
wxss:
.v1{
width: 350px;
margin: 0 auto;
line-height: 50rpx;
background-color: pink;
overflow: hidden;
white-space: nowrap;
}
.t{
width: 100%;
font-size: 28rpx;
white-space: nowrap;
}
js:
var _this=this;
var animation = wx.createAnimation({
duration: 18000,
delay:0
})
animation.translateX(350).step()
this.setData({
animationData: animation.export()
})
setInterval(function () {
animation.translateX(-this.data.text.length*12).step() //12与字体大小有关
animation.translateX(350).step({duration:0}) //瞬间复位
this.setData({
animationData: animation.export()
})
}.bind(this), 100) // 循环时间短是为了减少延迟,按理会使公告移动速度会变低,实际并没有,很不理解。