无限滚动的总结1

底部无限滚动实现方法

<div class="bottom-text">
      <span class="span-style" :style="{right: right + 'px' }">{{bottomText}}</span>
      <span v-show="showText" class="span-style" :style="{right: right + 'px' }">{{bottomText}}</span>

</div>

data () {

return {

        right: -screen.availWidth,
        showText: true

}}

created () {
      setInterval(this.scroll, 100)
    },

scroll () {
        if (this.right < screen.availWidth) {
          this.showText = true
          this.right = this.right + 20
        } else {
          this.showText = false
          this.right = -screen.availWidth
          this.right = this.right + 20

        }

}

.bottom-text{
    font-size: 1.5rem;
    font-size: 1.8rem;
    color: #FFC107;
    margin-bottom: 1rem;
    overflow: hidden;
    width: 100%;
  }

.span-style{
    position: relative;
    transition: all 0.5s;
  }