<!-- 总结:1 data中的是一个对象 2 this表示的是data中的这个实例对象 3 在mounted中去调用函数 3.1 computed中去返回的是一个对象 4 如何将超市器变为定时器 5.textBox是包裹transition的盒子,(1)给一个固定的高度, (2)超出部分消失 (3) width: 100%;
-->
<style> h2 { padding: 20px 0 } .textBox { 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; } 表示离场--动画结束之后 y轴的方向是负值 .slide-leave-to { transform: translateY(-20px) scale(0.8); opacity: 0; } </style>
<body> <div> <h2>公告栏文字停顿滚动</h2> <div id="app"> <div class="textBox"> <transition name="slide"> <!-- slide 是表示的自定义的前缀 item表示的是计算属性中的函数 它 返回来的是一个对象--> <p class="text" :key="item.id">{{ item.val}}</p> </transition> </div> </div> </div> <script> var vm = new Vue({ el:"#app",data:{ textArr: [ '1 第一条公告''3 第三条公告第三条公告第三条公告' ],//表示当前显示的是那一条数据呢 number:0 this表示的是data这个实例对象 computed: { item(){ return{ id:this.number,获取到当前显示的是第几条数据 val:this.textArr[this.number] 到到显示的内容 } } },1)"> 在dom熏染完了之后,就执行该函数 mounted() { this.startMove(); },1)">方法函数写在methods中 methods: { startMove(){ console.log("我出来了") let timer=setTimeout(()=>{ 如何知道现在滚动到那一条数据了呢? 在data中定义一个id,根据id来处理。当前到底在显示那一条数据 if(this.number===2){ this.number=0; }else{ this.number+=1; } this.startMove(); 将超时器改变为了定时器 },2000) },}); </script> </body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。