赞
踩
-
- <template>
- <!-- vue 实现无限向上滚动 -->
- <div id="box">
- <div
- id="con1"
- ref="con1"
- :class="{ anim: animate == true }"
- @mouseenter="mEnter"
- @mouseleave="mLeave"
- >
- <p v-for="(item, index) in items" :key="index">
- 中奖人的名字是--{{ item.name }}
- </p>
- </div>
- </div>
- </template>
-
- <script>
- export default {
- data() {
- return {
- animate: false,
- items: [
- //消息列表对应的数组
- { name: "程序员-陈*" },
- { name: "程序员-李*" },
- { name: "程序员-王*" },
- { name: "程序员-赵*" },
- { name: "程序员-高*" },
- { name: "程序员-要*" },
- { name: "程序员-刘*" },
- ],
- };
- },
- mounted() {
- this.timer1 = setInterval(this.scroll, 1000); //setInterval定时器,当页面加载完执行定时器
- },
-
- methods: {
- scroll() {
- //建一个方法
- let con1 = this.$refs.con1;
- con1.style.marginTop = "-30px"; //设置style样式 向上移动30px
- this.animate = !this.animate; //
- var that = this; // 在异步函数中会出现this的偏移问题,此处一定要先保存好this的指向
- setTimeout(function () {
- that.items.push(that.items[0]); //尾部追加数组的第一个,放到数组最后
- that.items.shift(); //删除第一个元素
- con1.style.marginTop = "0px"; //设置style样式 向上移动30px 再回到原位
- that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象,此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
- }, 500);
- },
- mEnter() {
- clearInterval(this.timer1); //鼠标移入清除定时器
- },
- mLeave() {
- this.timer1 = setInterval(this.scroll, 1000); //鼠标离开启动定时器,执行 scroll
- },
- },
- };
- </script>
-
-
- <style scoped>
- * {
- margin: 0;
- padding: 0;
- }
- #box {
- margin: 0 auto;
- width: 300px;
- height: 175px;
- line-height: 30px;
- overflow: hidden;
- padding-left: 30px;
- border: 1px solid #ffffff;
- transition: all 0.5s;
- }
- .anim {
- transition: all 0.5s;
- }
- #con1 li {
- list-style: none;
- line-height: 30px;
- height: 30px;
- }
- </style>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。