Vue公告栏向上滚动
<template> <div> <h1>公告栏向上滚动</h1> <div class="box"> <transition name="slide"> <p class="text" :key="text.id">{{text.val}}</p> </transition> </div> </div> </template> <script> export default { name: 'scroll', data () { return { textArr: [ '1.这是一条公告', '2.这是一条公告too', '3.这是一条公告tootoo' ], number: 0 } }, computed: { text () { return { id: this.number, val: this.textArr[this.number] } } }, mounted () { this.startMove() }, methods: { startMove () { // eslint-disable-next-line let timer = setTimeout(() => { if (this.number === 2) { this.number = 0; } else { this.number += 1; } this.startMove(); }, 1000); // 滚动不需要停顿则将1000改成动画持续时间 } } } </script> <style scoped> h1 { padding: 20px 0 } .box{ width: 100%; height: 40px; margin: 0 auto; overflow: hidden; position: relative; text-align: center; } .text { width: 100%; position: absolute; bottom: 0; } .slide-enter-active, .slide-leave-active { transition: all 0.5s linear; } .slide-enter{ transform: translateY(20px) scale(1); opacity: 1; } .slide-leave-to { transform: translateY(-20px) scale(0.8); opacity: 0; } </style>
如果是整屏滚动,例如
把1-4作为一整屏滚动,只需要修改数组即可