无限滚动2，修改之前的底部的滚动

最新推荐文章于 2019-09-21 14:25:44 发布

maoer9999

最新推荐文章于 2019-09-21 14:25:44 发布

阅读量257

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40829594/article/details/80048669

之前的有个缺点就是，在大屏上显示一卡一卡的

继续是底下的滚动的实现

<div class="bottom-text" :style="{transform: 'translate(' + -right + 'px,0px)'}">
    <span class="span-style">{{bottomText}}</span>
</div>

data () {
   return {
        right:0,
}}

created () {
      this.$nextTick(() => {
        this.right = document.body.clientWidth
      })
      setInterval(this.scroll, 0)
    },

scroll () {
        if (this.right < this.rightSelf) {
          this.right = this.right + 0.5
        } else {
          this.right = -this.rightSelf
          this.right = this.right + 0.5
        }
      }

.bottom-text{
    font-size: 1.8rem;
    color: #FFC107;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0ms ease-in;
  }
  .span-style{
    display: inline-block;
  }