其他分享
首页 > 其他分享> > vue实现文字上下滚动效果

vue实现文字上下滚动效果

作者:互联网

需求描述

一个提示功能,可能有多条数据需要显示,但是展示的地方最多显示3条,要求当返回的数据超过3条,就通过上下滚动显示。鼠标移入停止滚动,鼠标移出继续滚动。

问题分析

展示区高度固定,信息列表高度是根据数据条数计算的,可以通过定位,然后修改信息列表的 top 值来实现滚动效果,滚动的最大高度 pos 就是 信息列表的高度 - 展示区高度。

设置一个定时器,每一步step叠加移动1px,当移动的距离等于pos的时候,step设置为0,从新开始滚动。

但是有个问题:每次step设置为0,定位就跳到第一条,会出现跳跃感,解决方法就是,将数据前三条push到list中,增加三条冗余数据,这样每次滚动到最大高度在跳转后页面跳跃感就消失了。

问题解决

<div class="container" @mouseenter="clearTimer" @mouseleave="scroll">
    <div class="box">
    	<p v-for="(tip, index) in tips" :key="index">{{ tip.desc }}</p>
    </div>
</div>
// 获取列表数据
getTips() {
  list().then(res => {
    let data = res.data
    
    // 超过3条时,增加冗余数据,调用滚动方法
    if (data.length > 3) {
      let pre3 = chunk(data, 3)[0]
      data.push(...pre3)
      this.tips = data

      this.$nextTick(() => {
        this.scroll()
      })
    } else {
      this.tips = data
    }
  })
},
// 滚动动画   
scroll() {
  let box = document.querySelector('.box')
  let height = box1.clientHeight
  let pos = height - 75
  
  this.clearTimer()
  this.timer = setInterval(() => {
    if (this.step < pos) {
      box.style.top = -this.step + 'px'
      this.step++
    } else if (this.step === pos) {
      this.step = 0
    }
  }, 50)
},
// 清除定时器
clearTimer() {
  clearInterval(this.timer)
}

标签:vue,滚动,高度,pos,step,let,上下,data
来源: https://www.cnblogs.com/codebook/p/16322822.html