vue中怎么做的无缝滚动？详细些，带代码

发布网友 发布时间：2022-04-16 11:29

我来回答

共2个回答

懂视网 时间：2022-04-16 15:51

vue软件中不支持添加流动字幕，只能添加普通的静态字幕。用户若想实现流动或滚动字幕效果，需要借助其他第三方软件来完成。

　　

　　VUE是iOS和Android平台上的一款Vlog社区与编辑工具，允许用户通过简单的操作实现Vlog的拍摄、剪辑、细调、和发布，记录与分享生活，还可以在社区直接浏览他人发布的Vlog，与Vloggers互动。随着手机摄像头的发展，越来越多的人开始使用手机拍照和摄像。

　　

　　VUE软件通过点按改变视频的分镜数实现简易的剪辑效果，而剪辑能够让视频传达更多的信息。同时，该软件中有12款滤镜供用户选择，切换至前置摄像头会出现自然的自拍美颜功能。VUE支持40款手绘贴纸，还可以编辑贴纸的出现时间。

热心网友 时间：2022-04-16 12:59

vue中的无缝滚动效果图：

三人行慕课

vue中的无缝滚动代码：

   

<template>    <div class='scroll'>         <ul :class='{animateTop}'>            <li                 v-for='(item,index) in scrollList'            >                {{item}}            </li>        </ul>             </div></template><script type="text/javascript">export default {    data () {        return {            animateTop:false,            scrollList:[                "妻子起步连撞5车",                "梅西点球扳平比分",                "阿迪商标被判无效",                "林志玲婚后首亮相",                "詹保罗AC米兰主帅",                "来自三人行慕课"            ]        }    },    methods:{        scrollSlide(){            this.animateTop = true;            setTimeout(()=>{ this.scrollList.push(this.scrollList[0]);this.scrollList.shift();   this.animateTop = false;             },500)         }    },    mounted(){        setInterval(this.scrollSlide,2000)    }}</script><style scoped>.animateTop{    transition: all .3s;    margin-top:-25px;}.scroll{    height: 50px;    width:100%;    background: #ccc;    overflow: hidden;    line-height: 25px;    font-size:16px;}</style>