滚动公告文字抖动的一种解决思路

·  阅读 1012

最近项目(vue)里要求做系统中某个功能访问记录的滚动展示,大体思路是:子元素使用position: absolute布局,配合js使用setinterval进行动态控制top值的变化,是子元素进行滚动,大概代码是这样的:

setInterval(() => {
    this.topValue--;
    //子元素的高度this.$refs.messageListRef.offsetHeight
    if(this.topValue<=-this.$refs.messageListRef.offsetHeight){
        this.topValue=0;
    }
}, 50);	复制代码

可是在交付之后在某些PC上出现文字抖动的现象,所以需要对程序进行一些修改。

之前在研究骨架屏的源码是发现一个API:window.requestAnimationFrame() ,感觉是能做点文章的,该window.requestAnimationFrame()方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数以在下次重绘之前更新动画。该方法将回调作为在重绘之前调用的参数。

注意:如果要在下次重绘时为另一帧设置动画,则回调例程必须自己调用requestAnimationFrame()。

只要您准备好在屏幕上更新动画,就应该调用此方法。这将请求在浏览器执行下一次重绘之前调用您的动画函数。回调次数通常为每秒60次,但根据W3C建议,通常会与大多数Web浏览器中的显示刷新率相匹配。

修改之后的代码如下:

html:

<template>
  <div class="about">
    <div class="message-list" ref="messageListRef" :style="{top:`${topValue}px`}">
      <div class="message-item" @click='goLink(item.value)' @mouseover="messageItemMouseover" @mouseout="messageItemMouseout" v-for="(item,index) in messageList" :key='index+item.label'>
        <span>{{item.label}}</span>
        <span>{{item.date}}</span>
      </div>
    </div>
  </div>
</template>复制代码

js:

<script>
export default {
  data(){
    return {
      messageList:[
        {
          label:'这是一个动态滚动的公告1',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告2',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告3',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告1',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告4',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告5',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告6',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告7',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告8',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告9',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告10',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告11',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告12',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
      ],
      topValue:0,
      scorllFlag:true,
    }
  },
  mounted() {
    window.requestAnimationFrame(this.beginScroll)
  },
  beforeDestroy() {
    clearTimeout(this.t)
  },
  methods: {
    //开始滚动执行的方法
    beginScroll(){
      if(this.scorllFlag){
        this.topValue=this.topValue-0.5;
        if(this.topValue<=-this.$refs.messageListRef.offsetHeight){
          this.topValue=0;
        }
        window.requestAnimationFrame(this.beginScroll)
      }
    },
    //鼠标悬停停止滚动
    messageItemMouseover(){
      this.scorllFlag = false;
    },
    //鼠标离开继续滚动
    messageItemMouseout(){
      clearTimeout(this.t);//防抖处理
      this.t = setTimeout(()=>{
        this.scorllFlag = true;
        window.requestAnimationFrame(this.beginScroll)
      },200)
    },
    goLink(url){
      window.open(url)
    }
  },
}
</script>复制代码

截取gif的工具稍微有点垃圾,看起来会有抖动效果,实则是没有的


TIME!


分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改