vue实现文字上下停顿滚动

最新推荐文章于 2024-07-09 10:45:34 发布

Best_北诗

最新推荐文章于 2024-07-09 10:45:34 发布

阅读量2.1k

点赞数

分类专栏： Vue css 文章标签：前端

本文链接：https://blog.csdn.net/m0_48607837/article/details/124321406

版权

Vue 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

这篇博客介绍如何在Vue项目顶部实现数据的上下翻页和停顿滚动效果。通过HTML、JavaScript和CSS代码展示了一个滚动列表的实现过程，其中包括使用Vue的计算属性、定时器以及CSS动画关键帧来控制元素的平滑移动和停留时间。

摘要由CSDN通过智能技术生成

需求:

在Vue项目的顶部,来实现数据上下翻页+停顿滚动

代码:

html中写的

<el-row :gutter="22">
      <el-col :xs="24" :sm="24" :lg="24">
        <!-- 头部滚动区域 -->
        <div class="text-container">
          <div class="text-container" v-if="showTopSlide">
            <transition class="inner-container2" name="slide" mode="out-in">
              <li :key="text.val.id">
                <router-link to="/notice">
                  <span class="roll-id">序号:{{ text.val.id }}</span>
                  <span class="roll-text"
                    >发布时间:&nbsp;{{ text.val.dbtime }}</span
                  >
                  <span class="roll-text"
                    >来源:&nbsp;{{ text.val.source }}</span
                  >
                  <span class="roll-text">类型:&nbsp;{{ text.val.type }}</span>
                </router-link>
              </li>
            </transition>
          </div>
        </div>
      </el-col>
    </el-row>

JS中写的:

<script>
const totalDuration = 4000;//停顿的时间
export default {
mounted() {
    this.startMove();
  },
   //设置计算属性
  computed: {
    text() {
      return {
        id: this.number,
        val: this.realList[this.number]
      };
    }
  },
  methode:{
		startMove() {
      		let timer = setTimeout(() => {;
        		if (this.number === this.realList.length) {
          			this.number = 0;
        		} else {
          			this.number += 1;
        		}
        		this.startMove();
      		}, totalDuration);
    	}
	}
}
</script>

css:

<style>
.text-container {
  width: 100%;
  height: 50px;
  line-height: 10px;
  margin: 10px auto;
  border-radius: 10px;
  // border: 1px solid cornflowerblue;
  background-color: #fff;
  overflow: hidden;
}
.inner-container {
  animation: myMove 5s linear infinite;
  animation-fill-mode: forwards;
}
/*文字停顿滚动*/
@keyframes myMove2 {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-30px);
  }
  20% {
    transform: translateY(-30px);
  }
  30% {
    transform: translateY(-60px);
  }
  40% {
    transform: translateY(-60px);
  }
  50% {
    transform: translateY(-90px);
  }
  60% {
    transform: translateY(-90px);
  }
  70% {
    transform: translateY(-120px);
  }
  80% {
    transform: translateY(-120px);
  }
  90% {
    transform: translateY(-150px);
  }
  100% {
    transform: translateY(-150px);
  }
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s linear;
}
.slide-leave-to {
  transform: translateY(-20px);
}
.slide-enter {
  transform: translateY(20px);
}
</style>