vue 实现文字在一行自动滚动(如同走马灯)
vue 实现文字在X轴自动播放
·
第一步
data() {
return {
moveTexts: ''
}
}
注释: moveTexts用来存放播放的内容
第二步
<div class="move-text">
<p>{{ moveTexts }}</p>
</div>
注释:class=“move-text”,盒子的宽度高度等样式,后面可实现在定义的宽度内自动播放(X轴滚动)
第三步
methods: {
// 设置详情滚动
moveText() {
// 箭头函数解决 this 指向问题
setInterval(() => {
var start = this.moveTexts.slice(0, 1)
var end = this.moveTexts.slice(1)
this.moveTexts = end + start
}, 400)
},
}
第四步
created() {
this.moveText()
},
更多推荐
已为社区贡献2条内容
所有评论(0)