• 查看
    • 编辑修改
    • 首页
    • UNITY
    • NODEJS
    • PYTHON
    • AI
    • GIT
    • PHP
    • GO
    • CEF3
    • JAVA
    • HTML
    • CSS
    devbox
    笔触狂放9
    这个屌丝很懒,什么也没留下!
    关注作者
    热门标签
    • jquery
    • HTML
    • CSS
    • PHP
    • ASP
    • PYTHON
    • GO
    • AI
    • C
    • C++
    • C#
    • PHOTOSHOP
    • UNITY
    • iOS
    • android
    • vue
    • xml
    • 爬虫
    • SEO
    • LINUX
    • WINDOWS
    • JAVA
    • MFC
    • CEF3
    • CAD
    • NODEJS
    • GIT
    • Pyppeteer
    • article
    热门文章
    • 1gcc环境下 使用C/C++ 连接Mysql数据库_mysqlclient.lib
    • 2使用阿里开源的Spring Cloud Alibaba AI开发第一个大模型应用_spring.cloud.ai.tongyi.chat
    • 3pywebview桌面程序开发(技术路线:前端+Python,全网独一份!!!!!!)
    • 4ParagonNTFSforMac_15.5.102中文版最受欢迎的NTFS硬盘格式读取工具
    • 5Hive Sql中六种面试题型总结_hivesql面试必会6题经典
    • 6python 迭代器与生成器
    • 7Django计算机毕业设计企业固定资产信息管理系统python(源码程序+lw+远程部署)_python固定资产管理程序源代码
    • 8使用Python并发执行HTTP请求
    • 9详解JESD204B串行接口时钟需求及其实现方法
    • 10天途重磅推出无人机教管平台3.1版及飞课APP
    当前位置:   article > 正文

    Vue自定义行数 文字向上滚动轮播效果_vue 文字轮播

    作者:笔触狂放9 | 2024-06-10 21:35:05

    赞

    踩

    vue 文字轮播

    效果图   列表无限向上轮播

     

    1. <template>
    2. <div class="marquee">
    3. <div class="marquee_box" ref="marquee_box">
    4. <ul class="marquee_list" :class="{marquee_top:animate}">
    5. <li v-for="(item,index) in list" :key="index">{{item}}</li>
    6. </ul>
    7. </div>
    8. </div>
    9. </template>
    10. <script>
    11. export default {
    12. data () {
    13. return {
    14. animate: false,
    15. showNum: 4, // 可见列表条数
    16. list: [
    17. '1111111111111111111',
    18. '22222222222222222222',
    19. '333333333333333333333',
    20. '4444444444444444444',
    21. '5555555555555555555',
    22. '666666666666666666',
    23. '777777777777777',
    24. '888888888888888888'
    25. ]
    26. }
    27. },
    28. created () {
    29. // 页面显示
    30. setInterval(this.showMarquee, 2000)
    31. },
    32. mounted () {
    33. // 可见数据高度
    34. this.$refs.marquee_box.style.height = this.showNum * 30 + 'px'
    35. },
    36. methods: {
    37. // 处理数组方法
    38. showMarquee () {
    39. this.animate = true
    40. this.list.push(this.list[0])
    41. setTimeout(() => {
    42. this.list.shift()
    43. this.animate = false
    44. }, 1000)
    45. }
    46. }
    47. }
    48. </script>
    49. <style scoped>
    50. .marquee {
    51. width: 100%;
    52. /* height: 200px; */
    53. align-items: center;
    54. color: #3a3a3a;
    55. background-color: white;
    56. display: flex;
    57. box-sizing: border-box;
    58. overflow: hidden;
    59. }
    60. .marquee_title {
    61. padding: 0 20px;
    62. height: 21px;
    63. font-size: 14px;
    64. border-right: 1px solid #d8d8d8;
    65. align-items: center;
    66. }
    67. .marquee_box {
    68. display: block;
    69. position: relative;
    70. width: 65%;
    71. overflow: hidden;
    72. margin: 0 auto;
    73. }
    74. .marquee_list {
    75. display: block;
    76. position: absolute;
    77. top: 0px;
    78. left: 0;
    79. }
    80. .marquee_top {
    81. transition: all 1s;
    82. margin-top: -30px;
    83. }
    84. .marquee_list li {
    85. height: 30px;
    86. line-height: 30px;
    87. font-size: 14px;
    88. padding-left: 20px;
    89. }
    90. .marquee_list li span {
    91. padding: 0 2px;
    92. }
    93. </style>

    我这么棒,快夸我!!

    声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/700442
    推荐阅读
    • article深入理解Kafka分区副本机制_kafka分区中,主副本失效情况下,其余从副本均有同等机会...
      这是针对当首领副本挂掉且 ISR 中没有其他可用副本时,是否允许某个不完全同步的副本成为首领副本,这可能会导致数据丢失或...

      赞

      踩

    • articleVue - Vue3 封装组件(更新中...)_vue3封装组件...
      穿梭框 DataTransfer

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

      

    闽ICP备14008679号