html文字自动循环滚动,小程序实现循环滚动播放文字

uni-app小程序实现滚动播放文字效果

HTML结构:

开始testtesttesttesttesttest到底

JS:

data() {

return {

animationObj: {},

animation: {}

}

},

methods: {

loadAnimation() { //初始化动画函数

let that = this;

let query = wx.createSelectorQuery(); //创建选择器

query.select('#box').boundingClientRect(); //获取盒子大小位置等信息的请求(未发送的请求)

query.select('#text').boundingClientRect(); //同上

query.exec(function(res){ //发送以上请求，返回的是所有请求的结果数组

console.log('请求结果',res);

let boxWidth = res[0].width; //获取外盒子的宽度

let textWidth = res[1].width; //获取文字长度

if(boxWidth

that.animationObj = wx.createAnimation(); //创建一个动画实例 animation

that.startAnimation(boxWidth,textWidth);

}

})

},

startAnimation(boxWidth,textWidth,step) { /