vue2.6实现新闻滚动播放代码

最新推荐文章于 2024-05-13 01:07:15 发布

强身健体，清神醒脑

最新推荐文章于 2024-05-13 01:07:15 发布

阅读量959

点赞数

分类专栏： css3 Vue 文章标签： javascript css3 前端 vue.js

本文链接：https://blog.csdn.net/weixin_43660626/article/details/123450380

版权

Vue 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css3

7 篇文章 0 订阅

订阅专栏

组件可以直接复制展示

<template>
 <div class="fy-wrap">
   <div class="scroll-body"
    ref="scrollBody"
    :style="scrollBodyStyle"
    @mouseenter="onMouseEnter"
    @mouseleave="onMouseLeave"
    @transitionend="onTransitionend"
   >
    <div class="origin">
        <div class="item"
          v-for="item in data"
          :key="item.id"
          ref="item"
        >
          <div class="content text-ellipsis" :title="item.name">
            {{ item.name}}
          </div>
        </div>
    </div>
    <div class="copy">
        <div class="item"
          v-for="item in data"
          :key="item.id"
        >
          <div class="content text-ellipsis" :title="item.name">
            {{ item.name}}
          </div>
        </div>
    </div>
   </div>
 </div>
</template>

<script>
export default {
    data() {
        return {
          timer:null,
          scrollBodyStyle:{},
          translateY:0,
          data:[{
             id:1,
             name:'测试1'
          },{
          id:2,
             name:'测试2'
          },{
            id:3,
             name:'测试3'
          },{
            id:4,
            name:'测试4'
          },{
            id:5,
            name:'测试5'
          }]
        };
    },
    props: {
    },
    computed: {

    },
    created() {

    },
    mounted() {
          this.loop();

    },
    beforeDestroy() {
      clearTimeout(this.timer);
    },
    watch: {
    },
    methods: {
      onMouseEnter(){
        clearTimeout(this.timer)
      },
      onMouseLeave(){
        this.loop();
      },
      onTransitionend(){
          let child = this.$refs.item[0];
          let {height:parentHeight} = this.$refs.scrollBody.getBoundingClientRect()
          if(child){
            if((parentHeight / (this.translateY )) <= 2){
              this.scrollBodyStyle={
                transform:`translateY(0px)`
              }
              this.translateY = 0;
            }
          }
      },
      loop(){
        if(this.data.length <=1){
          return;
        }
        this.timer = setTimeout(()=>{
          let child = this.$refs.item[0];
          if(child){
            let { height } = child.getBoundingClientRect();
            this.translateY += height;
            this.scrollBodyStyle = {
                transform:`translateY(-${this.translateY}px)`,
                transition: 'all .3s'
            }
          }
          this.loop();
        },3000)
      }
    },
    components: {

    },
};
</script>

<style lang="scss" scoped>
  .fy-wrap{
    max-height: 50px;
    overflow: hidden;
    .scroll-body{
    }
    .item{
      @include flex-row;
      background-color: rgba(12, 25, 28, 0.7);
      padding: 10px 40px;
      cursor: pointer;
      height: 50px;
      .content{
        color: #999;
        max-width: 200px;
        font-size: 14px;
      }
    }
  }
</style>