当前位置:   article > 正文

vue 实现无限向上滚动_vue文字向上循环滚动

vue文字向上循环滚动
  1. <template>
  2. <!-- vue 实现无限向上滚动 -->
  3. <div id="box">
  4. <div
  5. id="con1"
  6. ref="con1"
  7. :class="{ anim: animate == true }"
  8. @mouseenter="mEnter"
  9. @mouseleave="mLeave"
  10. >
  11. <p v-for="(item, index) in items" :key="index">
  12. 中奖人的名字是--{{ item.name }}
  13. </p>
  14. </div>
  15. </div>
  16. </template>
  17. <script>
  18. export default {
  19. data() {
  20. return {
  21. animate: false,
  22. items: [
  23. //消息列表对应的数组
  24. { name: "程序员-陈*" },
  25. { name: "程序员-李*" },
  26. { name: "程序员-王*" },
  27. { name: "程序员-赵*" },
  28. { name: "程序员-高*" },
  29. { name: "程序员-要*" },
  30. { name: "程序员-刘*" },
  31. ],
  32. };
  33. },
  34. mounted() {
  35. this.timer1 = setInterval(this.scroll, 1000); //setInterval定时器,当页面加载完执行定时器
  36. },
  37. methods: {
  38. scroll() {
  39. //建一个方法
  40. let con1 = this.$refs.con1;
  41. con1.style.marginTop = "-30px"; //设置style样式 向上移动30px
  42. this.animate = !this.animate; //
  43. var that = this; // 在异步函数中会出现this的偏移问题,此处一定要先保存好this的指向
  44. setTimeout(function () {
  45. that.items.push(that.items[0]); //尾部追加数组的第一个,放到数组最后
  46. that.items.shift(); //删除第一个元素
  47. con1.style.marginTop = "0px"; //设置style样式 向上移动30px 再回到原位
  48. that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象,此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
  49. }, 500);
  50. },
  51. mEnter() {
  52. clearInterval(this.timer1); //鼠标移入清除定时器
  53. },
  54. mLeave() {
  55. this.timer1 = setInterval(this.scroll, 1000); //鼠标离开启动定时器,执行 scroll
  56. },
  57. },
  58. };
  59. </script>
  60. <style scoped>
  61. * {
  62. margin: 0;
  63. padding: 0;
  64. }
  65. #box {
  66. margin: 0 auto;
  67. width: 300px;
  68. height: 175px;
  69. line-height: 30px;
  70. overflow: hidden;
  71. padding-left: 30px;
  72. border: 1px solid #ffffff;
  73. transition: all 0.5s;
  74. }
  75. .anim {
  76. transition: all 0.5s;
  77. }
  78. #con1 li {
  79. list-style: none;
  80. line-height: 30px;
  81. height: 30px;
  82. }
  83. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/700486
推荐阅读
相关标签