vue怎么加滚动的字幕

vue添加滚动字幕的方法如下：

1、进入vue，点击创作视频选项上传视频素材。

2、滑动页面右侧的列表，选择编辑的功能即可添加滚动字幕。

VUE是iOS和Android平台上的一款Vlog社区与编辑工具。允许用户通过简单的 *** 作实现Vlog的拍摄、剪辑、细调、和发布，记录与分享生活。还可以在社区直接浏览他人发布的Vlog，与Vloggers互动。随着手机摄像头的发展，越来越多的人开始使用手机拍照和摄像。摄像一般来说要比拍照门槛高，但是视频传播的信息量又远大于照片。VUE就诞生在这样的背景下，希望用拍照一样简单的 *** 作，帮助用户在手机上拍摄精美的短视频。成立三年的VUE给人的印象是低调而缓慢。2016年3月成立，VUE一直安安静静扮演着一个视频工具的角色，一路拿到了真格基金、贝塔斯曼、九合创投、愉悦资本等机构的投资，到2019年，总安装用户突破1亿。

<div class="marquee">

      <div class="marquee_title">

                 <span>免费微报</span>

      </div>

        <div class="marquee_box">

                <ul class="marquee_list":class="{marquee_top:animate}">

                        <li v-for="(item,index) in marqueeList">

                                {{item.name}}

                        </li>

                </ul>

        </div>

</div>

.marquee {

width: 100%

height: 50px

align-items: center

color: #3A3A3A

background-color: white

display: flex

box-sizing: border-box

overflow: hidden

}

.marquee_title{

padding: 0 20px

height: 21px

font-size: 14px

border-right: 1px solid #d8d8d8

align-items: center

}

.marquee_box {

display: block

position: relative

width: 60%

height: 30px

overflow: hidden

}

.marquee_list {

display: block

position: absolute

top: 0

left: 0

}

.marquee_top {

transition: all 0.5s

margin-top: -30px

}

.marquee_list li {

height: 30px

line-height: 30px

font-size: 14px

padding-left: 20px

}

.marquee_list li span {

padding: 0 2px

}

下面的这个放到  Vue   data里面的return里面去  -------------   也就是》》》》data（）{return{}}

animate: false,

marqueeList: [

                {

                    name: '1军电视剧烦恼是的空间开发'

                },

                {

                    name: '2军水电费了羧甲淀粉钠盛开'

                },

                {

                    name: '3军第三方库收到货否'

                },

                {

                    name: '4军杜师傅iOS'

                }

            ],

接着在created：function里面放入这个

setInterval(this.showMarquee, 2000)

最后一步就是，放到，方法里面也就是，methods，里面下面就是要放的

showMarquee: function () {

                this.animate = true

                setTimeout(()=>{

                    this.marqueeList.push(this.marqueeList[0])

                this.marqueeList.shift()

                this.animate = false

            },500)},

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>

---