基于vue实现新闻自下往上滚动效果(示例代码)_vue.js

        

          

            
            {{ item.title }}
            查看>
          
        
        

         
x
          
          
更多内容可扫码查看
        
      

.newsList {
  width: 90%;
  margin: 10px auto;
  height: 90px;
  overflow: hidden;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 17px;
  color: #ffffff;
   /* background-color: red; */
}
.anim {
  transition: all 1s;
  margin-top: -30px;
}
#con1 li {
  list-style: none;
  line-height: 30px;
  height: 30px;
}

mounted() {
    this.timer=setInterval(this.scroll, 2000);
    this.$api.newsList({
      limit:12,
      page:1
    }).then(res=>{
      this.items=res.data.records
    })
  },
  methods: {
    scroll() {
      this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
        this.items.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 1000);
    },
    getCode(qrCode){
      this.code=qrCode
      this.codeShow=true
    },
    mouseOver(){
      console.log('鼠标悬停')
      // this.animate = false;
      clearInterval(this.timer)
    },
    mouseOut(){
      // this.animate = true;
      this.timer=setInterval(this.scroll, 2000);
    }
  },