vue实现文字上下停顿滚动

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Best_北诗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值