查看
    • 编辑修改
    • 首页
    • UNITY
    • NODEJS
    • PYTHON
    • AI
    • GIT
    • PHP
    • GO
    • CEF3
    • JAVA
    • HTML
    • CSS
    devbox
    我家自动化
    这个屌丝很懒,什么也没留下!
    关注作者
    热门标签
    • 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
    热门文章
    • 1Java哈希表(散列表)解析_java hashtable函数
    • 2java redis 面试题_Java面试题(Redis篇)
    • 3数据结构——链表的实现(Java版)_java链表结构的实现
    • 4使用 Ollama 本地运行各种 LLM_ollama glm4
    • 5性能评测系列(PT-013):Spring Boot(K8s多实例) + GaussDB,高并发insert
    • 6Python-层次聚类-Hierarchical clustering
    • 7C++ 智能指针详解(发展历程,使用,模拟实现)_实现智能指针
    • 8elasticsearch之Pipeline&Processor(管道处理数据)_elasticsearch processors
    • 9LangChain+Fine-tune实现模型定制化_langchain、fine-tuning
    • 10小程序模拟更新微信_微信小程序模拟更新
    当前位置:   article > 正文

    文字从下往上滚动 各类插件及实现方法[vue]_文字从下往上无缝循环滚动的实现思路

    作者:我家自动化 | 2024-06-10 21:45:32

    赞

    踩

    文字从下往上无缝循环滚动的实现思路

     今天接到任务要我实现下图的第三种文字效果实在没有思路,于是百度了好久.找到了几种实现方法,其中也有插件.

    第一种方法:

    参考文章

    1. 对整个列表实现上移动画
    2. 将列表的第一个数据移动到最后一个

    因为vue是基于数据驱动的,所以,对我们开发者来说,直接操控数组,删除第一个数组数据,然后追加到数组后面就好了。

    template 部分

    1. <!-- 无缝滚动效果 -->
    2. <div class="marquee-wrap">
    3. <ul class="marquee-list" :class="{'animate-up': animateUp}">
    4. <li v-for="(item, index) in listData" :key="index">{
    5. {item}}</li>
    6. </ul>
    7. </div>

    script部分

    1. export default {
    2. name: "marquee-up",
    3. data() {
    4. return {
    5. animateUp: false,
    6. listData: [&
    声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/700489
    推荐阅读
    • articleunable to access ‘xx.git/‘ Failed to connect to gi...
      git config --global https.proxy https://127.0.0.1(地址):端口号。gi...

      赞

      踩

    • articleSCP命令实现Linux和Windows系统间文件互传,dos窗口上传文件到sftp服务器_wind...
      Linux和Windows间文件互传_windows使用scp命令windows使用scp命令 ...

      赞

      踩

    • articlejava 使用WebClient发送https请求...
      使用createWebClient()方法来构建WebClient进行SDK调用java 使用WebClient发送ht...

      赞

      踩

    • article【Python】文件处理的魔法之旅...
      我们定义了日志文件所在的目录和日志行的正则表达式模式。【Python】文件处理的魔法之旅 目录 ...

      赞

      踩

    • articlePython开发环境搭建指导_开发环境中有哪些版本注意事项,怎么操作...
      本文主要介绍Python开发环境的搭建。主要包括如下几部分内容:(1)Python软件的安装。注意版本的选择和安装过程中...

      赞

      踩

    • article软件设计师---数据结构_邻接矩阵的时间复杂度...
      软件设计师的数据结构是一个重要的主题,本篇文章主要介绍了时间复杂度和空间复杂度,并提供了一些真题的讲解链接。邻接矩阵的时...

      赞

      踩

    • articleLinux环境项目开发(一)——虚拟机安装与Git配置_虚拟机设置git分支...
      一、创建虚拟机并保证基本功能(网络等)VirtualBox创建虚拟机(略)参照B站CodeSheep的教程操作即可。传送...

      赞

      踩

    • articlespringboot连接mongod授权问题导致异常_springboot mongodb inva...
      分析:1.使用客户端登录可以,但是项目连接不上。查看对应数据库授权 ,发现数据库没有用户授权权限,增加权限:spring...

      赞

      踩

    • articleVivado中Debug的使用方法_vivado debug教程...
      目录方式一:代码中例化ILA IP核方式二:通过网表标记方式三:代码中Mark_debugVivado中提供了多种Deb...

      赞

      踩

    • article智能电子牌——Gitee的使用_电子门牌 github...
      智能电子牌——Gitee的使用1. 设备端基本配置如果你的Ubuntu是新开的虚拟机系统,那么下载源码时git相关的指令...

      赞

      踩

    • article路径规划 | 图搜索算法:DFS、BFS、GBFS、Dijkstra、A*...
      来源丨古月居点击进入—>3D视觉工坊学习交流群地图数据常常可以用图(Graph)这类数据结构表示,那么在图结构中常用的搜...

      赞

      踩

    • articlevue 使用人脸识别_使用Vue.js和Kairos构建简单的人脸识别应用...
      vue 使用人脸识别Face Detection and Recognition have become an incr...

      赞

      踩

    • article踩坑mybatis-plus,### Cause: com.mysql.jdbc.exception...
      错误如图:org.springframework.jdbc.BadSqlGrammarException:###Erro...

      赞

      踩

    • articlePython决策树鸢尾花类别分类(1)_构建一个决策树对鸢尾花数据集(iris)进行分类,描述主要过...
      (2).如果是浮点数(0到1之间),则每次分裂节点的时候只考虑int(max_features * n_features...

      赞

      踩

    • article数据结构——带头双向循环链表_带头结点的双循环链表d.带头结点的单循环链表...
      带头双向循环链表_带头结点的双循环链表d.带头结点的单循环链表带头结点的双循环链表d.带头结点的单循环链表 ...

      赞

      踩

    • articlewindows使用scp远程传输文件的方法_windows如何使用scp传文件...
      使用windows的git客户端解决因为windows的cmd原生是不支持ssh协议的,所以需要安装其他工具来达到目的。...

      赞

      踩

    • article自然语言处理NLP之文本摘要、机器翻译、OCR、信息检索、信息抽取、校对纠错_nlp校对...
      自然语言处理NLP之文本摘要、机器翻译、OCR、信息检索、信息抽取、校对纠错目录自然语言处理NLP之文本摘要、机器翻译、...

      赞

      踩

    • article疫情时代下,普通人如何在不确定的世界活得好一点?...
      作者|Mr.K编辑| Emma来源| 技术领导力(ID:jishulingdaoli)彼得德鲁克曾说:“在不安的时代,不...

      赞

      踩

    • article5-Kafka中的分区副本机制...
      生产者的分区写入策略轮询(按照消息尽量保证每个分区的负载)策略,消息会均匀地分布到每个partition写入消息的时候,...

      赞

      踩

    • articleA Mist of Florescence(Codeforces 989C) 构造_volumetr...
      Sample InputInput5 3 2 1Output4 7DDDDDDDDABACADDBABACDDDDDDD...

      赞

      踩

    相关标签
    • git
    • github
    • linux
    • 运维
    • 服务器
    • java
    • https
    • 开发语言
    • python
    • 笔记
    • 学习
    • 路线
    • 入门
    • 教程
    • 数据结构
    • 算法
    • spring
    • 鸿蒙
    • 深度优先
    • 图搜索算法
    • 宽度优先
    • vue
    • 人脸识别
    • javascript

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

      

    闽ICP备14008679号