第一步

 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()
},
Logo

前往低代码交流专区

更多推荐