经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue实现消息向上无缝滚动效果
来源:jb51  时间:2022/4/11 12:27:27  对本文有异议

本文实例为大家分享了vue实现消息向上无缝滚动效果的具体代码,供大家参考,具体内容如下

代码:

  1. <ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
  2. ? <li v-for="item in noticeList">
  3. ? ? ...
  4. ? </li>
  5. </ul>
  1. <script>
  2. ? export default {
  3. ? ? data() {
  4. ? ? ? return {
  5. ? ? ? ? noticeList: [],
  6. ? ? ? ? animate:false,
  7. ? ? ? ? intNum: undefined,
  8. ? ? ? }
  9. ? ? },
  10. ? ? created: function () {
  11. ? ? ? this.getNoticeData();
  12. ? ? },
  13. ? ? methods: {
  14. ? ? ? getNoticeData() {
  15. ? ? ? ? this.$http.get('/news/allList', {
  16. ? ? ? ? ? params: {
  17. ? ? ? ? ? ? 'pageNumber': 10,
  18. ? ? ? ? ? ? 'currentPage': 1
  19. ? ? ? ? ? }
  20. ? ? ? ? }).then(res => {
  21. ? ? ? ? ? this.noticeList = res.data.items;
  22. ? ? ? ? ? this.ScrollUp();
  23. ? ? ? ? });
  24. ? ? ? },
  25. ? ? ? ScrollUp() {
  26. ? ? ? ? this.intNum = setInterval(() => {
  27. ? ? ? ? ? this.animate=true;// 向上滚动的时候需要添加css3过渡动画
  28. ? ? ? ? ? setTimeout(()=>{
  29. ? ? ? ? ? ? this.noticeList.push(this.noticeList[0]);// 将数组的第一个元素添加到数组的
  30. ? ? ? ? ? ? this.noticeList.shift(); //删除数组的第一个元素
  31. ? ? ? ? ? ? this.animate=false;
  32. ? ? ? ? ? },500)
  33. ? ? ? ? }, 10000);
  34. ? ? ? },
  35. ? ? ? //鼠标移上去停止
  36. ? ? ? Stop() {
  37. ? ? ? ? clearInterval(this.intNum);
  38. ? ? ? },
  39. ? ? ? Up() {
  40. ? ? ? ? this.ScrollUp();
  41. ? ? ? },
  42. ? ? }
  43. ? }
  44. </script>

样式

  1. .new-list{
  2. ? ? line-height: 28px;
  3. ? ? transition: top 0.5s;
  4. }
  5. .anim{
  6. ? ? transition: all 0.5s;
  7. ? ? margin-top: -28px;//高度等于行高
  8. }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号