IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue实现文字上下停顿滚动 -> 正文阅读

[JavaScript知识库]vue实现文字上下停顿滚动

需求:

在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>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-22 18:27:19  更:2022-04-22 18:32:04 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 0:27:15-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码